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FOREWORD 


THE ADOPTION RATE OF EMERGING STANDARDS like H TM L5 and C SS3 grows every day. Things 
tliat were only possible on thick client apps are becoming a reality on the web. With browsers get- 
ting faster and better each day, with more common tasks becoming available as reusable libraries, 
and with open sourcing of nearly all big web frameworks, our world wide web is a happening place. 
Penetration of mobile devices and the varied mobile app development technologies are making devel- 
opers further consider the open and accessible web as their medium of expression. 

During this time, client side libraries likejQuery and jQ uery mobile, and server-side technologies 
likeASP.N ET are making typically difficult and cumbersome tasks approachable. 0 n top of all this, 
free tools likeVisual Web Developer 2012 make web development more fun than ever before. It is 
indeed a joy to be a web developer these days, and it is nice to see this book come out and make 
becoming web developer approachable for everyone. 

I mar Spaanjaars, the author of this book, has been a M icrosoft M VP in ASP.N ET since 2008, and 
thistime around wealso had him join theASP.N ET Insiders group, in which we bounce feature 
ideas and pre-release products even before they ever get to public beta. I mar has been a constant 
source of feedback for the team during the development process and I am certain he will continue to 
be so even in the future. 

In Beginning ASP.N ET 4.5: in C#and VB he starts slow, goes deep, builds concepts, and covers 
the latest features of both ASP.N ET 4.5 and Visual Studio 2012. W hether you arejust starting web 
development or upgrading to ASP.N ET 4.5, this book is certainly worth adding to your toolbox. 

It is my pleasure to know Imar, and I want to thank him for his contribution to our community. H is 
insights and thoughts were invaluable the product team behind ASP.N ET and Visual Studio. I hope 
his insights will help you too. 

ViSHAL R. JOSHI 

Principal Program M anager Lead 
Windows Azure G roup, M icrosoft Corporation 

http : //vishalr j oshi . com 


INTRODUCTION 


TO BUILD EFFECTIVE AND ATTRACTIVE database-driven websites, you need two things; a solid and 
fast frameworl< to run your web pages on and a ricli and extensive environment to create and pro- 
gram tliese web pages. Witli ASP.N ET 4.5 and Visual Studio 2012 you get both. Together they form 
the platform to create dynamic and interactive websites. 

ASP.N ET 4.5 builds on top of its popular predecessors ASP.N ET 2.0, 3.5, and 4.0. While main- 
taining backward compatibility with sites built using these older versions, ASP.N ET 4.5 and Visual 
Studio 2012 introduce new, exciting features and bring many smaller, but much needed changes to 
the framework and development tools. 

With each new release of Visual Studio sinceVisual Studio 2003, 1 am surprised by the sheer 
amount of new functionality and changes M icrosoft has been ableto put in the product. Visual 
Studio 2012 is no exception. If you're familiar with earlier versions, you'll notice the new design as a 
big change. The U I of Visual Studio has been updated to the Windows 8 design look and feel to bet- 
ter align with other products from M icrosoft. 

You'll also find many changes— small and large— in both theASP.N ET Framework and Visual 
Studio. Some of these changes are the improved CSS and JavaScript editors (discussed in Chapter 
3 and Chapter 10, respectively), the strongly typed data-bound controls (discussed in Chapter 14), 
the inclusion of N uGet, discussed in Chapter 11, and the introduction of bundling and minification, 
discussed in Chapter 19. 

M y favorite new feature is probably the Page Inspector that helps you debug client-side as well as 
server-side code at the same time. I discuss the Page Inspector in Chapter 18. 

If you're familiar with earlier versions of ASP.N ET, you'll be happy to find many small gems in the 
new version of the framework that will make your life as a developer easier. I mention and discuss 
these new features throughout this book where appropriate. For a complete list of all new features 
in ASP.N ET, check out the following white paper at the official ASP.N ET website: 

http : //www. asp .net/ vnext /overview/ whit epapers /what s -new 

If this link no longer works by the time you read this book, search www.asp.net for "W hat's new in 
ASP.N ET 4.5." 

Probably the best thing about Visual Studio Express 2012 for Web is its price: it's available for free. 
This makes Visual Studio and ASP.N ET probably the most attractive and compelling web develop- 
ment technologies available today. 


INTRODUCTION 


WHO THIS BOOK IS FOR 

This book is for anyone wlio wants to learn liow to build rich and interactive websites that run on 
the M icrosoft platform. With the l<nowledgeyou gain from this bool<, you create a great foundation 
to build any type of website, ranging from simple hobby-related websites to sites you may be creat- 
ing for commercial purposes. 

Anyone new to web programming should beableto follow along because no prior bacl<ground in 
web development is assumed, although it helps if you do have a basic understanding of H TM L and 
the web in general. The book starts at the very beginning of web development by showing you how 
to obtain and install Visual Studio. The chapters that follow gradually introduce you to new tech- 
nologies, building on top of the knowledge gained in the previous chapters. 

Do you havea strong preference for Visual Basic over C#or theother way around? Or do you think 
both languages are equally cool? 0 r maybe you haven't made up your mind yet and want to learn 
both languages? Either way, you'll like this book because all code examples are presented in both 
languages! 

Even if you have some experience with prior versions of ASP.N ET, you may gain a lot from this 
book. Although many concepts from previous versions are brought forward into ASP.N ET 4.5, 
you'll discover there's a lot of new stuff to be found in this book, including the strongly typed data 
controls, smarter code editors, new debugging facilities, and more. 


WHAT THIS BOOK COVERS 

This book teaches you how to create a feature-rich, data-driven, and interactive website called 
Planet Wrox. Although this is quitea mouthful, you'll find that with Visual Studio 2012, develop- 
ing such a website isn't as hard as it seems. You'll seethe entire process of building a website, from 
installing Visual Studio in Chapter 1 all the way up to putting your website on a live server in 
Chapter 19. The book is divided into 19 chapters, each dealing with a specific subject: 

>■ Chapter 1, "Getting Started with ASP.N ET 4.5." In this chapter you see how to obtain and 
install Visual Studio Express 2012 for Web, the free version of Visual Studio 2012 to build 
ASP.N ET websites. You are also introduced to HTM L5, thelatest standard for defining web 
pages. The chapter closes with an overview of the customization options that Visual Studio 
gives you. 

> Chapter 2, "Buiiding an ASP.N ET Website." This chapter shows you how to create a new 
website and how to add new items like pages to it. Besides learning how to create a well- 
structured site, you also see how to use the numerous tools in Visual Studio to create HTM L 
and ASP.N ET pages. 

>■ Chapters, "Designing Your Web Pages." Visual Studio comes with a host of tools that 
enable you to create well-designed and attractive web pages. In this chapter, you see how to 
make good use of these tools. Additionally, you learn about CSS, the language that is used to 
format web pages. 
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>- Chapter 4, "Working with ASP.N ET Server Controis." ASP.N ET Server Controls are 
one of the most important concepts in ASP.N ET. Tliey enable you to create complex and 
feature-rich websites with very little code. This chapter introduces you to the large number 
of server controls that are available, explains what they are used for, and shows you how to 
use them. 

>- Chapters, "ProgrammingYourASP.NET Web Pages." Although the built-in CSStoolsand 
the ASP.N ET Server Controls can get you a long way in creating web pages, you are lil<ely to 
use a programming language to enhance your pages. This chapter serves as an introduction 
to programming with a strong focus on programming web pages. Best of all: all the examples 
you see in this chapter (and the rest of the bool<) are in both Visual Basic and C#, so you can 
choose the language you lil<e best. 

>■ Chapters, "CreatingConsistent-Looi<ing Websites." Consistency is important to give your 
website an attractive and professional appeal. ASP.N ET helps you create consistent-looking 
pages through the use of master pages, which enable you to define the global look and feel 
of a page. Skins and themes help you to centralize the looks of controls and other visual ele- 
ments in your site. You also see how to create a base page that helps to centralize program- 
ming code that you need on all pages in your site. 

>• Chapter 7, "Navigation." To help your visitors find their way around your site, ASP.N ET 
comes with a number of navigation controls. These controls are used to build the navigation 
structure of your site. They can be connected to your site's central site map that defines the 
pages in your website. You also learn how to programmatically send users from one page to 
another. 

>• Chapter 8, "User Controis." User controls are reusable page fragments that can be used in 
multiple web pages. As such, they are great for repeating content such as menus, banners, 
and so on. In this chapter, you learn how to create and use user controls and enhance them 
with some programmatic intelligence. 

>• Chapter 9, "Vaiidating User Input." A large part of interactivity in your site is defined by the 
input of your users. This chapter shows you how to accept, validate, and process user input 
using ASP.N ET Server Controls. Additionally, you see how to send e-mail from your ASP 
.N ET website and how to read from text files. 

>- Chapter 10, "ASP.NET AJAX." M icrosoftASP.NET AJAX enables you to create good- 
looking, flicker-free web pages that close the gap between traditional desktop applications 
and websites. In this chapter you learn how to use the built-in Ajax features to enhance the 
presence of your web pages, resulting in a smoother interaction with the website. 

>■ Chapter 11, "jQuery." jQuery is a popular, open source and cross-browser JavaScript library 
designed to make it easier to interact with web pages in the client's browser. In this chapter 
you learn the basics of jQuery and see how to add rich visual effects and animations to your 
web pages. 

>• Chapter 12, "Introduction to Databases." Understanding how to use a database is critical to 
building websites, because most modern websites require the use of a database. You learn the 
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basics of SQL, the query language that enables you to access and alter data in a database. In 
addition, you are introduced to the database tools found in Visual Studio that help you create 
and manage your SQL Server databases. 

>" Chapter 13, "Displaying and Updating Data." Building on the knowledge you gained in 
Chapter 12, this chapter shows you how to usetheASP.NET data-bound and data source 
controls to create a rich interface that enables your users to interact with the data in the data- 
base that these controls target. 

>- Cliapter 14, "LINQ andtlieADO.NET Entity Framewori<." LIN Q is M icrosoft's solution 
for accessing objects, databases, XML, and more. The ADQ .N ET Entity Frameworl< (EF) is 
M icrosoft's new technology for database access. This chapter shows you what LINQ is all 
about, how to use the visual EF designer built into Visual Studio, and how to write LINQ 
to Entities queries to get data in and out of your SQL Server database. You also see how to 
work with strongly typed data controls to make it easier to write code with fewer errors. 

>" Cliapter 15, "Worl<ing with Data— Advanced Topics." Whereas earlier chapters focus mostly 
on the technical foundations of working with data, this chapter looks at the same topic from 
a front-end perspective. Y ou see how to change the visual appearance of your data through 
the use of control styles. Y ou also see how to interact with the data-bound controls and how 
to speed up your website by keeping a local copy of frequently accessed data. 

>• Chapter 16, "Security in YourASP.NET 4.5 Website." Although presented quite late in the 
book, security is a first-class, important topic. This chapter shows you how to make use of 
the built-in ASP.N ET features related to security. You learn about a number of application 
services that facilitate security. You also learn how to let users sign up for an account on 
your website, how to distinguish between anonymous and logged-on users, and how to man- 
age the users in your system. 

>■ Chapter 17, "Personalizing Websites." Building on the security features introduced in 

Chapter 16, this chapter shows you how to create personalized web pages with content tar- 
geted at individual users. You see how to configure and use ASP.N ET Profile, which enables 
you to store personalized data for known and anonymous visitors. 

Chapter 18, "Exception Handling, Debugging, and Tracing." You need good 
debugging tools to understand, improve, and fix the code you write for your ASP.N ET 
web pages. Visual Studio ships with great debugging support that enables you to diag- 
nose the state of your application at run time, helping you find and fix problems before 
your users do. You also get a good look at the Page Inspector that has been introduced in 
Visual Studio 2012. 

>- C hapter 19, "Deploying Your Website." By the end of the book, you should have a website 
that is ready to be shown to the world. But how exactly do you do that? What are the things 
you need to know and understand to put your website out in the wild? This chapter gives the 
answers and provides you with a good look at configuring different production systems in 
order to run your final website. You also see how to implement bundling and minification to 
improve the performance of your website. 
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HOW THIS BOOK IS STRUCTURED 

This book takes the time to explain concepts step by step using working examples and detaileci 
explanations. Using the famous Wrox Try It Out and H ow It Works sections, you are guided through 
a task step by step, detailing important things as you progress through the task. Each Try It 0 ut task 
is followed by a detailed How It Works section that explains the steps you performed in the exercise. 

At the end of each chapter, you find exercises that help you test the knowledge you gained in this 
chapter. You can find the answers to each question in Appendix A at the end of this book. Don't 
worry if you don't know all the answers to the questions. Later chapters do not assume you followed 
and carried out the tasks from the exercise sections of previous chapters. 

Because this is a beginner's book, I can't go into great detail on a number of topics. For nearly every 
chapter in this book, you'll find numerous other books that exclusively deal with the topic discussed. 
Where appropriate, I have included references to these books so you can easily decide whereto go to 
next if you want to deepen your knowledge on a specific subject. 


WHAT YOU NEED TO USE THIS BOOK 

This book assumes you have a system that meets the following requirements: 

>• Capable of running Visual Studio. For the exact system requirements, consult the readme file 
that comes with the software. 

>■ Running Windows 7 or Windows 8 (at least the H ome Premium edition), or one of the 
Windows Server 2008 R2 or 2012 editions. 

Chapter 1 showsyou how to obtain and install Visual Studio 2012, which in turn installsthe 

M icrosoft .N ET Framework version 4.5 and SQL Server Express LocalDB edition; then all you need 

is a good operating system and the drive to read this book! 


CONVENTIONS 

To help you get the most from the text and keep track of what's happening, a number of conventions 
are used throughout the book. 

^^^^^^Q Conventions 

T he Try It 0 ut is an exercise you should work through, following the text in the book. 

1. They usually consist of a set of steps. 

2. Each step has a number. 

3. Follow the steps through with your copy of the code. 

4. Then read the H ow It Works section to find out what's going on. 
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How It Works 

After each Try It Out, the actions you carried out and the code you've typed in are explained in detail. 


NOTE Boxes like this one hold important, not-to-be forgotten information that is 
directly relevant to the surrounding text. 


COMMON MISTAKES Mistal<es that are easily made while following the exer- 
cises are presented in a box like this. Be sure to read these carefully when you 
get stuck in an exercise. 


As for styles in the text: 

N ew terms and important words are italicized when they are introduced. 

>■ Codewithin the text ispresented lil<ethis: Request. QueryString. Get C id") 

>- URLs that do not start with www are prefixed with http:/ / to mal<e it clear it's an Internet 
address. URLs within the text are presented lil<ethis: http:// imar . spaanj aars . com. 

>" You'll see many URLsthat start with tinyuri .com or bit.iy, which are handy, online 
services to mal<e URLs shorter (and thus easier to type). Entering a tinyuri.com or bit .ly 
address in your browser should take you to its final destination. 

>■ M enu items that require you to clicl< multiple submenus have a special symbol that looks like 
this: o . For example: Fileo N ew o Folder. 

Code or content irrelevant to the discussion is either left out completely or replaced with 
ellipsis points (three dots) and a comment, like this: 

<tr> 

<td style="white-space : nowrap;"> 

. . . Menu items go here; not shown 
</td> 
</tr> 

The three dots are used regardless of the programming languageused in the example, so 
you'll see it for C#, Visual Basic, H TM L, CSS, and JavaScript. W hen you see it in code 
you're instructed to type into the code editor, you can simply skip the three dots and any- 
thing that follows them on the same line. 
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>• Code shown for the first time, or other relevant code, is in the following format: 

Dim roles As New ArrayListO 
roles .Add ( "Administrators" ) 
roles .Add ( "ContentManagers" ) 

To put emphasis on a block of code surrounded by other code, I use a bolded font like this: 

<appSettings> 

<add key="FromAddress" value="planetwrox@example . com"/> 

</appSettings> 

The surrounding code is used to make it easier to see where the bolded code should be 
placed. 

>• Quite often, white space in code is irrelevant, as is mostly the case with ASP.N ET markup 
and HTM L. To fit code within the boundaries of this book, I often wrap code over multiple 
lines and indent the part that should have been on the previous line like this; 

Dim result As String = 

WebConf igurationManager .AppSet tings . Get ( "FromAddress" ) 

If you're typing this code yourself, you can put it all on one line, or use the same line breaks 
if you prefer. The sample code that comes with this book has the code typically on a single 
line. 

>- Text that appears on-screen often has Each Word Start With A Capital Letter, even though 
the original screen text uses a different capitalization. This is done to make the screen text 
stand out from the rest of the text. 


SOURCE CODE 

As you work through the examples in this book, you may choose either to type in all the code 
manually or to use the source code files that accompany the book. All of the source code used in this 
book is availablefor download from thebook'sown pageon theWrox website atwww.wrox.com/ 
remtitie.cgi?isbn=iii83ii809. If somehow this link no longer works, go to www.wrox.com and 
locate the book either by using the Search box or by using oneof the title lists. Click theDownload 
Code link on the book's detail page to obtain all the source code for the book. 


NOTE Because many books have similar titles, you may find it easiest to searchi 
by ISBN; for this book the ISBN is 978-1-118-31180-6. 


You can download the full source for this book as a singlefilefor each programming language used 
in the book (C# or Visual Basic). You can decompress these files with your favorite decompression 
tool. If you extract the source, make sure you maintain the original folder structure that is part of 
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the code download. The different decompression tools use different names for this feature, but look 
for a feature like Use Folder Names or M aintain Directory Structure. Once you have extracted the 
files from the code download, you should end up with a folder called source and a folder called 
Resources. Then Create a new folder in the root of your C drive, call it BegASPNET, and move the 
Source and Resources folders into this new folder so you end up with folders like c:\BegASPNET\ 
Source and C:\BegASPNET\Resources. The Source folder Contains the sourcefor each of the 19 
chapters of thisbook and the final version of the Planet Wrox website. The Resources folder con- 
tains files you need during some of the exercises in this book. If everything turned out correctly, you 
should end up with the structure shown in Figure 1-1. 
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FIGURE 1-1 


Later chapters have you create folders called site and Release inside the same c:\BegASPNET 
folder, giving you a folder structure similar to that in Figure 1-2. 


xl 


INTRODUCTION 


Copy Paste 


Home Share 

Copy path 
[?| Paste shortcut 
Clipboard 


© 


Computer 
1^ Local Disk(C:) 

1^ BegASPNET 

^ Release 
^ Resources 
1. Site 


BegASPNCT 

View 

Move to * X Delete ^ 

L^Copyto' [^Rename 

Organize 


(i 

New 
folder 


Properties -. 


" t Ji « Local Disk (O) ► BegASPNET ► 


Name 

J. Release 
, , Resources 
Site 
Source 


Date modified 

8/30/2012 1:34 AM 
8/30/2012 1:30 AM 
8/30/2012 1:34 AM 
8/30/20121:32 AM 


[3 


Open 


S Select all 

aa Select none 
Invert selection 
Select 


Search BegASPNET 


Type 

File folder 
File folder 
File folder 
File folder 


Size 


FIGURE 1-2 


The Site folder contains the site as you'll build it throughout this book, and the Release folder will 
contain your final version at the end of this bool<. W henever you're stuck with some examples in this 
book, you can take a peek in the source folder to see how things should have ended up. 

If you want to run the site for a specific chapter to see how it works, be sure to open the chapter's 
folder in Visual Studio as a website. So, you should open a folder such as c:\BegASPNET\source\ 
Chapter 12 directly rather than opening its parent folder C:\BegASPNET\source. 

If you want to follow along in both programming languages, createa second folder called c:\ 
BegASPNETVB or C:\BegASPNETCs to hold thefilesfor the Other version. This way, the two sites can 
coexist without any problems. If you create a folder specifically for the C# language, don't include 
the hash symbol (#) because that's an invalid character in the pathname for a website. 

Sticking to this structure ensures a smooth execution of theTry It 0 ut exercises in this book. 
Incorrectly mixing or nesting these folders makes it harder to carry out the exercises and may 
even lead to unexpected situations and errors. Whenever you run into an issue or error that is not 
explained in this book, ensure that your site structure is still closely related to the one 
presented here. 


ERRATA 

I have made every effort to ensure that there are no errors in the text or in the code. H owever, no 
one is perfect, and mistakes do occur. If you find an error in this book, such as a spelling mistake 
or a faulty pieceof code, I'd be very grateful for your feedback. By sending in errata you may save 
another reader hours of frustration and at the same time you will be helping meprovideeven higher 
quality information. 
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To find the errata page for this bool<, go to www.wrox.com/remtitie.cgi?isbn=iii83ii809 or go 
to www . wrox . com and locate the title using the Search box or one of the title lists. Then, on the bool< 
details page, clicl< the Errata link. 0 n this page you can view all errata that has been submitted for 
this bool< and posted by Wrox editors. A complete book list including links to each book's errata is 

also available at www . wrox . com/mi sc-pages/bookllst . shtml. 

If you don't spot "your" error on the book's Errata page, go to www.wrox.cora/contact/ 
techsupport.shtrai and Complete the form thereto send us the error you have found. I'll check the 
information and, if appropriate, post a message to the book's errata page and fix the problem in sub- 
sequent editions of the book. 


P2P.WROX.COM 

For author and peer discussion, join the P2P forums at p2p.wrox.com. The forums are a web-based 
system for you to post messages relating to Wrox books and related technologies and interact with 
other readers and technology users. The forums offer a subscription feature to e-mail you topics 
of interest of your choosing when new posts are made to the forums. I am a frequent visitor of the 
Wrox forums, and I'll do my best to help you with any questions you may have about this book. 

At p2p.wrox.cora you Will find a number of different forums that will help you not only as you read 
this book, but also as you develop your own applications. To join the forums, just follow these steps: 

1. Go to p2p.wrox.cora and click the Register N ow link. 

2. Read the terms of use and click Agree. 

3. Complete the required information to join as well as any optional information you wish to 
provide and click Submit. 

4. Y ou will receive an e-mail with information describing how to verify your account and com- 
plete the joining process. 

You can read messages in the forums without joining P2P but in order to post your own messages, 
you mustjoin (which isfree). 

After you join, you can post new messages and respond to messages other users post. You'll find 
this book's own forum under theASP.N ET 4.5 category that is available from the homepage. You 
can read messages at any time on the web. If you would like to have new messages from a particu- 
lar forum e-mailed to you, click the Subscribe to this Forum icon by theforum name in the forum 
listing. 

For more information about how to use the Wrox P2P, be sure to read the P2P FAQs for answers to 
questions about how theforum software works as well as many common questions specific to P2P 
and Wrox books. To read the FAQs, click the FAQ link on any P2P page. 
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BEGINNING 

ASP.NET 4.5 



Getting Started with 
ASP.NET 4.5 


WHAT YOU WILL LEARN IN THIS CHAPTER: 


>• How to acquire and install Visual Studio Express 2012 for Web and 
Visual Studio 2012 

>" How to create your first website with Visual Studio Express 2012 

> How an ASP.NET page is processed by the server and sent to 
the browser 

>" How you can use and customize the development environment 

Ever since the first release of the .N ET Framework 1.0 in early 2002, M icrosoft has put a lot 
of effort and development time into ASP.N ET, the part of the .N ET Framework that enables 
you to build rich web applications. This first release meant a radical change from the older 
M icrosoft technology to build websites called Active Server Pages (ASP), now often referred to 
as classic ASP. The introduction of ASP.N ET 1.0 and the associated Visual Studio .N ET gave 
developers the following benefits over classicASP: 

>" A clean separation between presentation and code. With classicASP, your program- 
ming logic was often scattered throughout the H TM L of the page, making it hard to 
make changes to the page later. 

>■ A development model that was much closer to the way desktop applications are pro- 
grammed. This made it easier for the many Visual Basic desktop programmers to make 
the switch to web applications. 

>• A feature-rich development tool (called Visual Studio .N ET) that enabled developers to 
create and code their web applications visually. 
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> A choice between a number of object-oriented programming (OOP) languages, of wliicli 
Visuai Basic .N ET and C#(pronounced as C-Sliarp) are now the most popuiar. 

> Access to tlie entire .N ET Framewori<, wliicli for tlie first time meant tliat web developers 
liad a unified and easy way to access many advanced features to worl< witli databases, files, 
e-mail, networl<ing tools, and much more. 

Despite the many advantages of ASP. N ET over the older model, using ASP.N ET also meant an 
increase in complexity and the l<nowledge needed to build applications with it, mal<ing it harder for 
many new programmers to get started with ASP.N ET. 

After the initial release in 2002, M icrosoft released another version of the .N ET Frameworl< (called 
.N ET 1.1) and the development IDE (called Visual Studio .N ET 2003). M any people saw this as a 
service pacl< for the initial release, although it also brought a lot of new enhancements in both the 
framework and the development tools. 

In N ovember 2005, Visual Studio 2005 and ASP.N ET 2.0 were released. To the pleasant surprise 
of many developers around theworld, M icrosoft had again been ableto drastically improve and 
expand the product, adding many features and toolsthat helped reduce the complexity that was 
introduced with ASP.N ET 1.0. N ew wizards and smart controls made it possible to reduce the code 
required to build an application, decreasing the learning curve for new developers and increasing 
their productivity. 

In November 2007, M icrosoft released Visual Studio 2008 and the ASP.N ET 3.5 frameworl<, fol- 
lowed by Visual Studio 2010 and ASP.N ET 4 in M arch 2010. Both versions added a lot of new func- 
tionality, including LIN Q (discussed in Chapter 14), the integration of theAJAX Frameworl< (which 
you learn more about in Chapter 10), theADO.N ET Entity Frameworl< (discussed in Chapter 14), 
the inclusion of jQ uery (discussed in Chapter 11), and more. 

The current versions. Visual Studio 2012 and ASP.N ET 4.5, build on top of the successful Visual 
Studio 2010 and ASP.N ET 4 releases, leaving many of the beloved features in place while adding 
new features and tools in other areas. 

Over the next 19 chapters, you learn how to build full-featured ASP.N ET websites using Visual 
Studio Express 2012 for Web, M icrosoft's free development tool for ASP.N ET web applications, 
which is also part of the full Visual Studio 2012 suite. This bool< guides you through the process of 
creating a fully functional, database-driven website, starting with a bare-bones website in the next 
chapter, all the way down to the deployment of it to a production environment in Chapter 19. 

The sample site that comeswith thisbook and all theexamplesarebuilt with Visual Studio Express 
2012 for Web (VSEW), so it's important that you have it installed on your development machine. The 
next section showsyou how to acquireand install VSEW. Once you have it up and running, you see 
how to create your first website, followed by an extensive tour through the many features of VSEW. 

MICROSOFT VISUAL STUDIO EXPRESS FOR WEB 

Although you could theoretically write ASP.N ET web applications with N otepad or another text 
editor alone, you really want to install a copy of M icrosoft Visual Studio (VS). VS hosts an enor- 
mous number of toolsthat will help you in rapidly creating complex ASP.N ET web applications. 


Microsoft Visual Studio Express for Web | 3 


Visual Studio comes in two flavors: as a standalone and free version caiied M icrosoft Visual 
Studio Express 2012 for Web, and as part of the larger development suite called Visual Studio 
2012, which is also available in different editions, each with its own price tag. With the commer- 
cial editions of Visual Studio, the web components are fully integrated. You just start Visual Studio 
2012 and then create a Web Site Project or a Web Application Project, which in turn enables the 
web components of Visual Studio. 

Although the Express edition of Visual Studio isfree, it contains all the features and toolsyou need 
to createcomplex and feature-rich web applications. All the examples you find in thebool< can be 
built with the free Express edition, so there's no need to shell out big bucl<sfor the commercial ver- 
sions of Visual Studio 2012 to follow along with this bool<. 

I'll usetheterm Visual Studio (VS) to refer to both the commercial and freeversions of Visual 
Studio. When tall<ing about the free edition specifically, I'll use the terms Express edition or Visual 
Studio Express 2012 (VSEW). 

Getting Visual Studio is easy. You can download it from the M icrosoft site as discussed next. 

Getting Visual Studio 

You can get the free Visual Studio Express 2012 for Web from the M icrosoft site at www. microsoft 
.com/ express/. 0 n the Express homepage, follow the Downloads link until you reach the page 
that offers the downloads for the Express products, including VSEW. From this page, you can 
download VSEW as a Web Install, where you download only the installer, while the remaining files 
are downloaded during the installation process. M al<e sure you choose Visual Studio Express 2012 
for Web from the page, and not one of the other free Express products or one of the older editions of 
Visual Studio. 

Don't befooled by the file size of the Web Install download, which is just a few megabytes. The 
file you download is just the installer that downloads the required files over the Internet. The total 
download depends on your current system and will be somewhere between 180 M B and 270 M B. 

If you want to try out the full version of Visual Studio 2012, which also contains the web 
components, you can sign up for a free trial on the M icrosoft site at http://msdn.microsoft.com/ 
vstudio. You can choose to download an ISO image that you'll need to burn on a DVD or choose 
to download the Web Installer. 

Finally, you can download VSEW with the M icrosoft Web Platform I nstaller (W PI ) application 
availablefor download at www .microsoft . com/ web/plat form and at www. asp . net /downloads/. 
Besides VSEW, this tool also gives you easy access to many other web development- related tools 
and programs. The W PI is an excellent tool to get a whole bunch of web development- related 
programs and tools in one fell swoop. I often use it to get up and running real quicl< on a clean 
development machine. 

Installing Visual Studio Express (VSEW) 

Installing VSEW is a straightforward, although somewhat lengthy, process. Depending on your 
installation method, your computer, and your Internet connection speed, installing VSEW may tal<e 
anywhere between 20 minutes and an hour — or even more. 
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TRY IT OUT 


Installing Visual Studio Express 2012 for Web 


This Try It Out exercise guides you tiiroughi installing VSEW on your computer. It assumes you're using 
tiieWeb Platform Installer option as explained earlier, altiiougii tiie process for installing tiie Express 
edition from a DVD is almost identical. Thie steps you need to perform to install tiiefull versions of 
Visual Studio 2012 are similar as well, altiiougfi tiie screens you'll see will besomewiiat different. 

N 0 matter hiow you install VSEW, it's important tiiat you also install M icrosoft SQL Express Local DB 
Edition 11.0 — a required component if you want to follow along witii many of tiiis book's examples. 
It siiould be installed automatically whien you install VSEW, but in case it's not installed, you'll find 
instructions at tiie end of thiis exercise to make sure it's properly installed. 

1. Start by browsing to www.microsoft.com/express/ and follow tiie instructions to download 
VSEW 2012. M ake sure you install Visual Studio Express 2012 for Web, and not one of tiieotiier 
free Express editions or older versions. If tiiis link is ever ciianged or no longer provides direct 
access to tiie VSEW download, searcii tiie web for "install Visual Studio Express 2012 for Web" 
and you'll betaken to a download page wiiere you can start tiie installation. 

2. Depending on iiow you started tiie installer, you iiaveafew options. If you started tiie VSEW 
download, you siiould see a screen similar to Figure 1-1. 


Web Platform Installer 4.0 


- □ X 


O Visual Studio Express 2012 for Web with Windows Azure SDK 


1 Items to be installed 


This will get you everything needed to build and deploy Web 
applications to Windows Azure using Visual Studio Express 2012 
for Web. You will get Visual Studio Express 2012 for Web, the 
RTM release of the Windows Azure SDK, and the Windows Azure 
Cloud Tools add-ons for Visual Studio Express 2012 for Web. 

More information 

Publisher Microsoft 
Version: 11.0.50727 

Release date Wednesday, August 15, 2012 


Options 


FIGURE 1-1 


4. 


Click Install to initiate the installation and related components. 

If you started the Web Platform Installer instead, find Visual Studio Express 2012 for Web in the 
list of tools and select it. Finally, start the installation process. 

In both cases, you get a screen that lists the components to be installed. In addition, you need to 
agree to the license terms for the software. Once you agree, you should see a screen similar to 
Figure 1-2. 

After a while you should see a message indicating that VSEW has been installed successfully. The 
installer may need to reboot your machine during or after the installation. Once the installer has 
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finished, VSEW is ready for use. To cliecl< if SQL Express LocaiDB lias instaiied correctiy, start tiie 
Web Piatform Instaiier from tiie Windows Start menu or Start screen. N ext, under tiie Products item, 
find M icrosoft SQL Express LocaiDB Edition 11.0 and instaii it if it liasn't been instaiied aiready. 


PREREQUISITES 


Web Platform Installer 4.0 
INSTALL 



CONFIGURE 


FINISH 


Windows Azure 

Windows Azure is an open and flexible cloud 
platform tliat enables you to quickly build, 
deploy and manage applications across a global 
network of Microsoft-managed datacenters. 
Easily create web sites, virtual machines or 
databases in a few clicks. 
Try it free nowi 


Download progress: Microsoft SQL Express LocaiDB Edition 11.0 [March 2012) 


925 KB/sec 



FIGURE 1-2 


How It Works 

Tiiestraigiitforward instaiiation process guided you tlirougli tiie setup of VSEW using tiieWeb 
Piatform Instaiier. During instaiiation, tiieW PI aiso instaiied a copy of M icrosoft SQL Express 
LocaiDB Edition 11.0, M icrosoft's free version of its SQL Server 2012 database engine. SQL Server 
2012 is discussed and used a iot in tiiis booi<, starting witli Cliapter 12. Appendix B siiows you iiow to 
configure security settings for tire various versions of SQ L Server 2012. 

N ow tliat VSEW is instaiied, it's time to fire it up and start wori<ing witii it. Tlie next section sliows 
you liow to create your very first site in VSEW. You see iiow to create a site, add content to a web page, 
and view tiiat page in your browser. 


CREATING YOUR FIRST ASP.NET 4.5 WEBSITE 

You probabiy can't wait to get started witli your first ASP. N EI website, so instead of giving you 
a tiieoreticai overview of websites in VS, tlie next Try It Qut exercise dives riglit into tlie action 
and siiowsyou iiow to buiid yourfirst web project. Tiien, in tiieHow It Wori<s explanation and 
tlie section tliat follows, you get a good lool< at what goes on behind the scenes when you view an 
ASP.NET page in your browser. 
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TRY IT OUT 


Creating Your First ASP.NET Website 


1. Start VS from the Windows Start menu or Start screen if you liaven't done so already. Follow the 
on-screen instructions to register VSEW online and get a key. Enter the key in the VSEW start-up 
screen and click N ext to continue. N ote: if you're using the commercial version of Visual Studio, 
just start Visual Studio 2012 from the Start menu. All web-related components are accessed from 
the main VS program. The first time you start VS, there might be a delay before you can use it 
because it's busy configuring itself. Subsequent starts of the application will go much faster. 

2. If you're using a commercial version of Visual Studio, you may also get a dialog box that lets you 
choose between different collections of settings the first time you start Visual Studio. The choice 
you make on that dialog box influences the layout of windows, toolboxes, menus, and shortcuts. 
Choose the Web Development settings because those settings are designed specifically for ASP. N ET 
developers. You can always choose a different profile later by resetting your settings, as explained 
later in this chapter. 

3. Once VS is fully configured, you seethe main screen appear, as shown in Figure 1-3. 


start Page - Microsoft Visual Studio Express 2012 for Web 

Quick Launch (CtrkCa fi - B X 

FILE 

EDIT VIEW DEBUG TEAM TOOLS TEST WINDOW HELP 







r J 




Solution Explorer ▼ J? X 

□ 









LATEST NEWS 




Express 2012 for Web 


GETSTARIID 




Web 


1 



start 








What's New 




New Project... New Web Site... 


in Web 




Open Project... Open Web Site... 


Development 




Connect to Team Foundation Server... 


Getting started 






Wiiat's new in 






ASP.NET 4.5 and 






Web 




Recent 


Find Web hosting 






Cloud 






development with 






Windows Azure 






, Creating 






Applications 






for the Web 






ASP.NET 






WebForms 






ASP.NET MVC 





ASP.NET Web 





Pages 


Solution Explorer Team Explorer Database Explorer 

Ready 


FIGURE 1-3 


You get a full description of all the windows, toolbars, panels, and menus in the next section, so for 
now, just focus on creating a new website. Click the File menu in the upper-left corner and choose 
N ew Web Site. If you're using a commercial version of Visual Studio, depending on the settings you 
chose when starting Visual Studio the first time, you may have to open the submenu N ew first. 
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M ake sure you don't accidentally use the N ew Project menu, because that is used to create differ- 
ent types of .N ET applications. The N ew Web Site dialog box appears as shown in Figure 1-4. 


Templates 



New Web Site 


.NET Framework 4.5 - Sort by: Default 



ASP.NET Empty Web Site 

Visual Basic 


ASP.NET Web Forms Site 

Visual 

Basic 

l-n 

n 

ASP.NET Web Site (Razor v1) 

Visual 

Basic 

m 

ASP.NET Web Site (Razor v2) 

Visual 

Basic 

m 

ASP.NET Dynamic Data Entiti.. 

Visual 

Basic 

VB 

(3i 

WCF Service 

Visual 

Basic 



Search Installed Te p • 


Type: Visual Basic 
An empty Web site 


File System - C:\Users\lmar\Documents\VisualStudio201i- | Browse... | 

I OK I I Cancel 


FIGURE 1-4 


4. In the Installed Templates section on the left you can choose a pro- 
gramming language you will use for your site. This bool< showsall 
examples in both Visual Basic and Visual C#so you can choose a 
language to your lil<ing. 

5. In the list of templates in the middle, clicl< ASP.N ET Web Forms Site. 
Verify that File System is the selected option in the Web Location 
drop-down list at the bottom left. If you want, you could change the 
location on disl< where the website is stored by clicl<ing the Browse 
button and choosing a new location on your computer's hard drive. 
For now, the default location — a folder under your Documents 
folder — is fine, so you can leave the location as is. 

6. Clicl< OK. VS creates a new website for you that includes a number 
of files and folders (see Figure 1-5) to jump-start your website. 

7. Open the file Defauit.aspx by double-clicl<ing it and remove all 
the code inside the < asp : Content > block that has its ID set to 
Bodycontent (it Starts With <h3> at around line 19 and ends with 
</oi>) all the way at the bottom. Replace it with the following bolded 


Search Solution Explorer {Ctrl+;) 
CI Solution 'WebSite! (1)' (1 project] 


^ © WebSHeKD 


> E3 

O 

FIGURE 

code: 


Account 
App_Code 
App_Data 
bin 

Content 
Images 
Scripts 
About.aspx 
Bundle.config 
Contact.aspx 
Defauit.aspx 
favicon.ico 
Global. asax 
packages.config 
Site.master 
Web.config 

1-5 


<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent"> 
<h2>Hello World</h2> 

<p>Welcome to Beginning ASP.NET 4.5 on <%: DateTime.Now.ToStringO %></p> 

</asp : Content > 
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8. 


You'll see code formatted like this a lot more In this book. W hen you are Instructed to type In 
code formatted like this with some code In bold, you only need to type In the bolded code. The 
other code should already be present In the file. 

Don't worry about the code with the angle brackets (<>) and percentage symbol In the welcome 
message; these are called tags, and you learn more about them later. Although this code may not 
look familiar to you now, you can probably guess what It does: It writes out today's date and time. 

Press Ctrl 4f 5 to open the page In your default web browser. You see a page similar to the one 
shown In Figure 1-6. 


P • S I HomePage-MyASP.NET.. 


Home 


Register Log in 

About Contact | 


your logo here 


Home Page. Modify this template to ju 


To learn more about ASP.NET, visit http://asp.net . The page features videos, tutorials, and samples to help you get the most 
fromASP.NET. If you haveanyquestionsaboutASP.NET visit our fomms . 



Hello World 

Welcome to Beginning ASP.NET 4.5 on 8/31/201 2 2:1 3:1 5 AM 

I ©2012-MyASP.NET Application 


FIGURE 1-6 


If you already have some experience with Visual Studio you may be used to pressing F5 Instead. If 
you use that option, the site Is opened In debug mode and you may get a dialog asking If you want 
to enable debugging (which you can safely do). Debugging with F5 Is discussed In Chapter 18, and 
you're advised to useCtrl-ff5 until then. 

If you see an Information bar warning about Intranet settings In Internet Explorer, click Turn on 
Intranet Settings. 

If you don't seethe date and time In the page, or If you get an error, 
look again at the code In the welcome message. It starts with an angle 
bracket (<) followed by a percentage symbol and a colon. It closes 
with a single percentage sign and another anglebracket (>). Also, 
make sure you typed In the code exactly as shown here. Including figure 1-7 
capitalization. This Is especially true when you are using C#, because that language Is case 
sensitive. 

N otice how a small Icon representing IIS Express has appeared In the tray bar of Windows, visible 
In Figure 1-7. 


P @ (}S 


2:17 AM 
8/31/2012 


2 
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If you see a different icon, riglit-clici< your site in VS and clioose Use IIS Express. If you don't 
see tlie icon in tlie tray, ciici< tlie arrow near tlieotlier icons in tlie Windows tray and ciici< tlie 
Customize option. Tlien set IIS Express System Tray to Sliow Icon and N otifications. Tlie icon 
belongs to tlie built-in web server called IIS Express. This web server has been started by VS auto- 
matically to serve the request for your page. You learn more about how the web server processes 
your page later in this chapter. 

That's it. You just created your very first ASP. N ET website with Visual Studio. 
How It Works 

Although the website you created in this Try It Out is quite simple, the process that eventually results in 
the pageDefauit.aspx being displayed in your browser isn't so simple. All by itself, an ASP.N ET page 
(also referred to as an ASPX page because of its extension, or a Web Form) can't do much. It needs to 
be processed and served by a web server before your browser can display it. That's why VS automati- 
cally started up IIS Express to handle the request for the page. N ext, it started up your default web 
browser and directed it to the address of the web server (http://iocaihost :4 9474/Defauit .aspx in 
the Try It 0 ut example), although the actual port number in the address may change every time you 
start the web server because it is randomly chosen by VS. 

It's important to realize that the ASPX file you modified in VS is not the same as the one that eventually 
gets displayed by the browser. 

W hen you create a page in VS, you add marl<up to it. The marl<up in an ASPX page is a combination 
of H TM L, code for ASP.N ET Server Controls (which you learn more about in this chapter and in 
Chapter 4), code written in Visual Basic. N ET or C#, and more. 

W hen you request an ASPX page in your browser, the web server processes the page, executes any 
server-side code it finds in thefile, and effectively transforms the ASP.N ET markup into plain HTML 
that it then sends to the browser, where it is displayed. In the preceding Try It 0 ut, the resulting HTML 
causes the browser to display the current date and time. H TM L , or H yperText M arl<up Language, is 
the language that browsers use to display a web page. You learn how HTML lool<s and how to use it 
later in this chapter. 

To see how the final HTM L differs from theoriginal ASPX page, open the source for the page in 
your browser. In most browsers, you can bring up the source window by right-clicl<ing the page in the 
browser and choosing View Source or View Page Source. This brings up your default text editor, show- 
ing the H TM L for the page. 

If you already closed your browser after the preceding Try It Out, press Ctrl-ff 5 in VS to open the page 
and choose View Source. 

Scroll down in the source file until you seethe line with the Welcome text. Notice how instead of the 
code between the tags, you now see the actual date and time: 

<h2>Hello World</h2> 

<p>Welcome to Beginning ASP.NET 4 . 5 on 8/31/2012 2:13:15 AM</p> 

W hen the web server processed the page, it looked up the current date and time from the server and 
inserted it in the H TM L that got sent to the browser. Depending on the language settings of your 
Windows installation, you may see the date and time formatted differently to accommodate the 
Windows Regional Settings. 
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In the following section, you see how ASP.N ET works in much more detail. 


AN INTRODUCTION TO ASP.NET 4.5 

When you type a URL lil<e www.wrox.com in your web browser 
and press Enter, the browser sends a request to the web server at 
that address. This is done through HTTP, the HyperText Transfer 
Protocol. HTTP is the protocol by which web browsers and web 
servers communicate. When you request the URL, you send a 
request to the server. W hen the server is active and the request is 
valid, the server accepts the request, processes it, and then sends 
the response bacl< to the client browser. The relationship between 
the request and response is shown in Figure 1-8. 

Because you are using IIS Express, the server and the client are 
really the same machine. H owever, in a real-world scenario, 
you'll host your website on an external web server where it can be 
accessed by many different clients. 



Browser 


FIGURE 1-8 


For simple, static files, I il<e H TM L files or images, the web server 
simply reads the file from its local hard drive and sends it to the 
browser. H owever, for dynamic files, such as ASPX pages, this is obviously not good enough. If 
the web server were to send the ASPX file directly to the browser as a text file, you wouldn't have 
seen the current date and time in the browser, but instead you would have seen the actual code {<%■. 
DateTime.Now.Tostringo %>). So, instead of Sending the file directly, theweb server handsover 
the request to another piece of software that is able to process the page. This is done with a con- 
cept called Application M apping or H andler M apping, where an extension of a file (.aspx in this 
example) is mapped to an application that is capable of handling it. In the case of an .aspx page, the 
request is eventually handled and processed by the ASP.N ET run time, part of the M icrosoft .N ET 
Frameworl< designed specifically to handle web requests. 

During the processing of the page, three main areas can influence the way the page eventually ends 
up in the browser: 

>• Static text. Any static text, lil<eHTM L, CSS, or JavaScript code you placein a page, issent 
to the browser directly. You learn more about HTM L, CSS, and JavaScript (a programming 
language used at the client) in this and subsequent chapters, including Chapter 3, which gives 
you a detailed lool< at CSS. 

>• ASP.NET Server Controls. These controls are placed in your ASPX page and when they 
are processed, they emit HTML that is inserted in the page. You learn more about server 
controls after the discussion of HTM L in this chapter, and Chapter 4 is devoted entirely to 
ASP.N ET Server Controls. 

>■ Programming code. You can embed code, lil<e Visual Basic .N ET or C#, directly in a page, 
as you saw in the previous Try ItOut. In addition, you can place codein a separate code file. 
The official term for this code file is Code Beside. H owever, most developers refer to this as 
the Code Behind file, which is the term I'll sticl< to in this bool<. This code can be executed 
by the run time automatically, or based on a user's action. Either way, execution of the 
code can greatly influence the way the page is displayed, by accessing databases, performing 
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calculations, hiding or showing specific controls, and much more. You learn more about 
this Code Behind file in the next chapter, and programming your ASP. N ET web pages is dis- 
cussed in great detail in Chapter 5. 

0 nee the page is done processing, and all the H TM L for the page has been collected, the H TM L is 
sent back to the browser. The browser then reads it, parses it, and, finally, displays the page for you 
to look at. 

Because H TM L is so critical for displaying web pages, the next section gives you an overview of 
HTM L. 

Understanding HTML 

H TM L is the de facto language for creating web pages and is understood by every web browser 
that exists today. Since the beginning of the '90s it has been the driving force of the World Wide 
Web, the part of the Internet that deals with web pages. HTML documents aresimple text files 
that contain markup, text, and additional data that influences that text. The most recent version of 
H TM L is H TM L5. Although the specification of H TM L5 is still under development, a lot of mod- 
ern browsers support important parts of this specification, and this support increases with each new 
release of those browsers. Despite the fact that not all browsers support H TM L5 fully, it is really 
the future of H TM L-based applications, and therefore I use it in this book and for the Planet Wrox 
demo website. Don't worry about the limited browser support too much. All major browsers sup- 
port all of the H TM L5 features you use in this book, or support can easily be simulated by a script 
library called M odernizr, which you see later in the book. 

HTML Elements and Tags 

HTM L uses text surrounded by angle brackets to indicate how your content should be rendered (or 
displayed) in the browser. The text with angle brackets is referred to as a tag; a pair of tags holding 
some text or other content is referred to as an element. Take another look at the H TM L you saw in 
the previousTry It 0 ut where you opened the source window for the page in the browser: 

<h2>Hello World</h2> 

<p>Welcome to Beginning ASP.NET 4 . 5 on 8/31/2012 2:13:15 AM</p> 

The first line of this example contains an <h2> element with an opening tag (<h2>) and a closing 
tag (</h2>). This element is used to signify a heading at the second level (if you scroll up a bit in the 
final source in the browser, you also see an <hi> element). Notice how the element is closed with a 
similar tag, but with an additional forward slash (/) in it: </h2>. Any text between theseopening 
and closing tags is considered part of the element, and is thus rendered as a heading. In most brows- 
ers, this means the text is rendered in a larger font. Similar to the <h2> tag are tags for creating 
headings up to level six, such as <hi>, <h3>, and so on. 

Below the heading element, you seea <p> element, which isused to denotea paragraph. All text 
within the pair of <p> tags is considered part of the paragraph. By default, a browser renders a para- 
graph with some additional margin spacing at the bottom, although you can override that behavior. 

M any tags are available in H TM L, too many to cover them all here. The following table lists some 
of the most important tags and describes how they can be used. For a complete list of all H TM L 
elements, take a look at the website of the organization that maintains the HTML standard: 

www . w3 . org/TR/html5/ index . html. 


12 I CHAPTER 1 GETTING STARTED WITH ASP.NET 4.5 


TAG 

DESCRIPTION 

EXAMPLE 

<html> 

Used to denote the start 
and end of the entire page. 

<html> 

. . .All other content goes here 
</html> 

<head> 

Used to denote a special 
section of the page that 
contains data about the 
page, including its title 
and references to external 
resources. The contents of 
this element are not directly 
output on screen but influ- 
ence the looks and behavior 
of the page, as you'll see 
later. This element is placed 
inside the <html> element. 

<head> 

. . .Content goes here 
</head> 

<title> 

Used to define the title 
of the page. This title will 
appear in the browser's title 
bar. This element is placed 
inside the <head> element. 

<title> 

...Welcome to Planet Wrox 4.5 
</title> 

<body> 

Used to denote the start 
and end of the body of the 
page. Its content is what 
you see in the browser. This 
element is placed inside the 
<html> element. 

<body> 

. . .Page body goes here 
</body> 

<header> 

Used to denote the header 
of a page. This element and 
all remaining elements in 
this table are placed inside 
the <body> element. 

<header> 

...<img src= "Logo . png" ... /> 
< /header> 

<section> 

Used to denote various sec- 
tions in your page. You can 
have multiple sections per 
page. 

<section> 

...Content goes here 
</section> 

<aside> 

Used to denote content that 
is not part of the core page, 
but presented as an aside. 

<aside> 

...<img src= "Banner .png" ... /> 
</aside> 
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TAG 

DESCRIPTION 

EXAMPLE 

<CiX 1 L ± C > 

Used to denote the main 
piece of content in a page. 

^ n /.^ "1 £i ^ 

<cli 1 H^J-fcr> 

. . .Main page content goes here 
</article> 

<f ooter> 

of a page. 

<f ooter> 

. . .Content for footer goes here 
</f ooter> 

<a> 

Used to lini< one web page 
to another or to create links 
within a page. 

<a href ="http : //www. wrox . com" > 

Visit the Wrox site 
</a> 

<img> 

Used to embed images in 
a page. 

<img src="Logo . gif " /> 

<strong> 
<em> 

Used to format text in a bold 
or italic font. 

This is <strong>bold text</ strong> 
while <em>this text is in italic</em> 


<f orm> 
< input > 
<textarea> 
<select> 

<table> 
<tr> 
<th> 
<td> 


<ul > 
<ol> 
<li> 


<span> 


Used for input forms that 
enable users to submit infor- 
mation to the server. 

These tags are used to cre- 
ate a layout with a table. 
The <table> tag defines 
the entire table, the <th> is 
used to denote header cells, 
and the <tr> and <td> tags 
are used to define rows and 
cells, respectively. 

These three tags are used 
to create numbered or bul- 
leted lists. The <ul> and 
the <oi> tags define the 
looks of the list (either unor- 
dered, with a simple bullet, 
or ordered, with a number), 
and the <li> tag is used to 
represent items in the list. 

This tag is used to wrap 
and influence other parts 
of the document. It appears 
as inline, so it adds no 
additional line break on the 
screen. 


< input type="text" value="Some Text" /> 


<table> 
<tr> 

<td>This is a Cell in Column l</td> 
<td>This is a Cell in Column 2</td> 

</tr> 

</table> 


<ul> 

<li>First item with a bullet</li> 
<li>Second item with a bullet</li> 
</ul> 

<ol> 

<li>First item with a number</li> 
<li>Second item with a number</li> 
</ol> 

<p>This is some normal text while <span 
style= "color : red;">this text appears in 
red </span></p> 


(continued) 
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(continued) 


TAG 

DESCRIPTION 

EXAMPLE ^^^^^^^^^^^^H^^^ 

<div> 

Just like the <span> tag, the 
<div> tag is used as a con- 
tainer for other elements. 
However, the <div> acts 
as a block element, which 
causes an explicit line break 
before and after the <div> 
eiemeni uy aerauii. 

<div> This is some text on 1 line</div> 
<div> 

This text is put directly under the 
previous text on a new line. 
</div> 

<audio> 
<video> 
<source> 

Used to embed audio and 
video files in your web 
page. The <source> ele- 
ment is used to define 
multiple types of audio and 
video resources. 

<video src="Somevideo . mpg" /> 


HTML Attributes 

In addition to theHTM L elements, tlie examples in the preceding table also showed you HTML 
attributes. Attributes contain additional information that changes the way a specific element 
behaves. For example, with the <img> tag that is used to display an image, the src attribute defines 
the source of that image. Similarly, the <span> tag contains a style attribute that changes the color 
of the text to red. The value of the style attribute (color: red: ) is part of a cascading stylesheet 
(CSS), which is discussed in much more detail in Chapter 3. Just as with the H TM L elements, 
there is a long list of available attributes and the elements to which they apply on the W3C website: 

www . w3 . org/TR/html5/index . html#attributes-l. 

You don't need to memorize all these elements and attributes. M ost of the time, they are generated 
for you automatically by VS. In other cases, where you need to enter them by hand, VS offers you 
Intel 11 Sense to help you find the right tag or attribute. Intel 11 Sense is discussed in the next chapter. 

HTML Comments 

In order to comment something out in H TM L, you wrap it in comment tags, lil<e this; 

<!-- This is a comment --> 

Code you comment out is not processed by the browser (and thus isn't visible), but it's still sent to 
the browser (and thus is viewable by the end user). Because it is still sent to the browser, it adds to 
the page size, so you should use comments sparingly. In later chapters you see how to comment out 
code at the server so it's not sent to the client. 

The Rules of HTML5 

The rules of H TM L5 are pretty simple, and most of the time VS helps you get it right or shows 
you a list of errors and suggestions for how to fix them. HTM L5 isactually more relaxed than the 
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previous version of H TM L (called X H TM L, which in turn was a reformulation of H TM L 4.01 
with XML rules) when it comes to enforcing rules. 

Close Your Elements 

M ost elements in HTML must be closed. So when you start with a <div> tag, you must use </div> 
somewhere later in your page. Some exceptions exist (such as the <p> element if it's directly followed 
by some other elements), but I prefer to consistently close my tags. This is also the case for elements 
that don't have their own closing tags, lil<e <img> or <br> (to enter a line breal<). In H TM L5, these 
tags can be written as self-closing tags, where the closing slash is embedded directly in the tag itself 

as in <img src = "Logo . gif " /> Or <br />. 

Usage of Attributes 

W henever you write an attribute in a tag, you can write the value wrapped in double quotes, single 
quotes, or no quotes at all. For example, when writing out the <img> tag and its src attribute, you 
can write it lil<ethis: 

<img src="Logo.gif " /> 

You could also use single quotes to enclose the attribute value, lil<ethis; 

<img src= ' Logo . gif ' /> 

Both options work, as long as you use the same type of quote on both ends of the value. For values 
that don't contain a space, you can also leave out the quotes: 

<input value=yes> 

It's also sometimes necessary to nest single and double quotes. For example, when some special ASP 
.N ET syntax requires the use of double quotes, you should use single quotes to wrap the attribute's 
value: 

<asp:Label ID="TitleLabel" runat=" server" Text='<%# Eval { "Title" ) %>' /> 

You see this syntax used a lot more in later chapters in this bool<. 

For consistency, this bool< uses double quotes where possible in all H TM L that ends up in the client, 
as this is generally the accepted standard. 

Nest Your Elements Correctly 

W hen you write nested elements, make sure that you first close the inner element you opened last, 
and then close the outer element. Consider this correct example that formats a piece of text with 
both bold and italic fonts: 

<strong><em>This is some formatted text</em></strong> 

N otice how the <em> tag is closed before the <strong> tag. Swapping the order of the closing tags 
leads to invalid HTML: 

<strong><em>This is some formatted text</strong></em> 

Add a DOCTYPE Declaration to Your Page 

A DOCTYPE gives the browser information about the kind of H TM L it can expect. By default, VS 
adds a doctype for H TM L5 to your page: 
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< IDOCTYPE html> 

TheDOCTYPE greatly influences the way browsers like Internet Explorer render the page, so if you're 
seeing odd behavior on your page, checl< that your page has the correct doctype. 

You can view the complete H TM L5 syntax rules at theW3C siteatwww.w3.org/TR/htmi-markup/ 

syntax . html. 

Besides H TM L, an ASP.N ET web page can contain other marl<up as well. M ost pages will have 
oneor moreASP.N ET Server Controlsto give them some additional functionality. The next section 
briefly lool<s at these ASP.N ET Server Controls, but you get an in-depth look at them in Chapter 4. 

A First Look at ASP.NET Markup 

To some extent, the markup for ASP.N ET Server Controls is similar to that of H TM L. It also 
has the notion of tags, elements, and attributes, using the same angle brackets and closing tags as 
HTML does. One big difference is that the ASP.N ET tags start with an asp: prefix. For example, a 
button in ASP.N ET looks likethis: 

<asp:Button ID="Buttonl" runat= " server " Text="Click Me" /> 

Note how the tag is self-closed with the trailing slash (/) character, eliminating the need to type a 
separate closing tag. If you wanted to, you could use a separate closing tag, though. 

W hen a server control is processed, it returns H TM L. So, the code for the same button ends up like 
this when rendered in the browser: 

<input type="submit" name="Buttonl" value="Click Me" id="Buttonl" /> 

The process of converting the server control to its H TM L representation is similar to the code you 
saw earlier that displayed the current date. The server control is processed at the server by the ASP 
.N ET handler. This processing results in HTML, which is sent to the browser, where it's displayed. 
You see more of this in Chapter 4. 

N ow that you understand the basics of an ASP.N ET page and the H TM L that it generates, it's time 
to look at VS again. Knowing how to use the application and its many tools and windows is an 
important step in building fun, good-looking, functional websites. 


A TOUR OF THE IDE 

Visual Studio is by far the most extensive and feature-rich integrated development environment 
(IDE) for building ASP.N ET web pages. The abbreviation IDE refers to theway all the separate 
toolsyou need to build complex web applications are integrated in a single environment. Instead 
of writing code in a text editor, compiling code at the command line, writing HTML and CSS in 
a separate application, and managing your database in yet another, VS enables you to perform all 
of these tasks, and more, from the same environment. Besides the efficiency this brings because 
you don't have to constantly switch tools, this also makes it much easier to learn new areas of VS, 
because many of the built-in tools work in the same way. 
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The Main Development Area 

To get familiar witli tlie many tools tliat are packed in VS's interface, take a look at Figure 1-9. It 
shows the same screen you got after you created your first website in VS, but now it highlights some 
of the most important screen elements. If you are already familiar with a previous version of Visual 
Studio, you could skip this section and pick up again at the next Try It Out exercise later in this 
chapter. 
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FIGURE 1-9 


If you had a previous version of Visual Studio installed, your screen may look different, because 
Visual Studio 2012 is able to import settings from older versions. 

Choosing Your Development Profile 

Because VSEW targets people new to ASP.N ET development as well as seasoned web developers, 
you can choose among different developer profiles: Basic Settings, CodeOnly, and Expert Settings. 
In Basic Settings mode, many menu items you don't frequently use have been hidden or are placed in 
their own submenu. The Code Only profile is great for pure coding sessions where you're not inter- 
ested in many of the design features of VSEW, such as Design View or the Toolbox. Expert Settings 
mode gives you access to the full functionality of VSEW. You can switch between settings using 
the Tools o Settings menu. This book assumes you are using Expert Settings mode right from the 
beginning. You may not need all the features you see right from the start, but you sure will use most 
of them by the end of the book. Because the menu items change location depending on the profile 
you choose, I decided to use Expert Settings mode right away, to make it easier to refer to a specific 
menu item or feature. You don't have this option in the commercial versions of Visual Studio — 
Expert Settings is on by default. 
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The Main Menu 

At the top of the application, right below the Windows title bar, you seethe main menu. This menu 
bar contains familiar itemsyou find in many other W indows applications, lil<e the File, Edit, and 
H elp menus as well as menus that are specific to VS, such as the Website and Debug menus. The 
menu changes dynamically depending on thetasl< you're working on, so you'll see menu items 
appear and disappear as you worl< your way through the application. You can use the H elp o Set 
Help Preference menu to configure online and offline help. Offline help needsto beinstalled first, 
and online help requires a connection to the Internet. 

The Toolbar Area 

Right below the menu, you see the toolbar area, which is capable of showing different toolbars that 
give you quicl< access to the most common functions in VS. In Figure 1-9, only two of the toolbars 
are enabled, but VS comes with many other toolbars that you can use in specific tasl<-oriented sce- 
narios. Some toolbars appear automatically when you're working on a task that requires a particular 
toolbar's presence, but you can also enable and disable toolbars to your liking. To enable or disable 
a toolbar, right-click an existing toolbar or the menu bar and choose the toolbar from the menu that 
appears. 

The Toolbox 

On the left of the main screen, tucked away at the border of VS, you see the tab for the Toolbox. If 
you click the tab, the Tool box folds out, giving you a chance to see what it contains. If you click the 
little pin icon in the upper-right corner of the Toolbox (or any of the other panels that have this pin 
icon), it gets pinned to the IDE so it remains open. 

Just as with the menu bar and the toolbars, theToolbox automatically updates itself to show con- 
tent that is relevant to the task you're working on. When you're editing a standard ASPX page, the 
Toolbox showsthe many controlsyou have available for your page. You can simply drag an item 
from theToolbox and drop it on a location of your page where you want it to appear. These controls 
are discussed in great detail in Chapter 4. N otethat each Toolbox category also contains a Pointer 
icon. This isn't a control itself, though. In other designers for Visual Studio (such as Win Forms) 
this icon is used to get out of control drawing mode, but it has little use in ASP.N ET. TheToolbox 
contains multiple categories, with tools that you can expand and collapse as you see fit to make it 
easier to find the right tool. You can also reorder the items in the list, add and remove items from the 
Toolbox, and even add your own tools to it. Customizing the IDE is discussed later in this chapter. 

If theToolbox is not visible on-screen, press Ctrl-f-Alt-f-X to open it or choose View o Toolbox, pro- 
vided you have chosen the Expert Settings option in theTools o Settings menu. 

The Solution Explorer 

At the right of the screen, you see the Solution Explorer. The Solution Explorer is an important win- 
dow because it gives you an overview of the files that comprise your website. Instead of placing all 
your files in one big folder, the Solution Explorer enables you to store files in separate folders, creat- 
ing a logical and organized site structure. You can use the Solution Explorer to add new files to your 
site, move existing files around using drag and drop or cut and paste, rename files and delete them 
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from the project, and more. M uch of the functionality of the Solution Explorer is hidden behind its 
right-clicl< menu, which changes depending on the item you right-clicl<. 

At the top of the Solution Explorer, you see a small toolbar that gives you quicl< access to some 
functionality related to your website, including refreshing the Solution Explorer window, an option 
to nest related files, and two buttons that enable you to copy and configure your website. M ost of 
this functionality is discussed later in the bool<. 

You can access the Solution Explorer by choosing View o Solution Explorer from the main menu or 
by pressing Ctrl4Alt+L. 

The Database Explorer 

This window, hidden behind the Solution Explorer in Figure 1-9, enables you to work with 
your databases. If you have a commercial version of Visual Studio, such as Visual Studio 2012 
Professional, this window is called the Server Explorer and may be located at the left of your screen. 

You can access the Database Explorer by choosing View o Database Explorer or by pressing 
Ctrl+Alt+S. The Database Explorer is discussed in more detail in the chapters about databases, 
starting with Chapter 12. 

The Properties Grid 

With the Properties Grid, you can view and edit the properties of many items in Visual Studio, 
including files in the Solution Explorer, controls on a web page, properties of the page itself, and 
much more. The window constantly updates itself to reflect the selected item. You can quicl<ly open 
the Properties Grid by pressing F4. You can use this same shortcut to force the Properties Grid to 
show the details of a selected item. 

The Document Window 

The Document W indow isthemain area in themiddleof the application. This is where most of 
the action tal<es place. You can use the Document Window to worl< with many different document 
formats, including ASPX and HTM L files, CSS and JavaScript files, code files for VB and C#, XM L 
and text files, and even images. In addition, you can use the same window to manage databases, cre- 
ate copies of your site, view the pages in your site in the built-in mini-browser, and much more. 

The Document W indow is a tabbed window by default, which means it can host multiple docu- 
ments, each one distinguished by a tab with the filename at the top of the window. The right-clicl< 
menu of each tab contains some useful shortcuts for working with the file, including saving and clos- 
ing it and opening the file's parent folder in Windows Explorer. 

To switch between documents, you can press Ctrl-i-Tab, click thetab for the document you want 
to see, or click the down arrow in the upper-right corner of the Document Window, next to the 
Solution Explorer, shown in Figure 1-9. Clicking the down arrow reveals a list of open documents so 
you can easily select one. 

Another way to switch documents is to press Ctrl-l-Tab and then hold down the Ctrl key. On the win- 
dow that pops ups, you can select a document you want to work with in the right-hand column. You 
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can then use the cursor keys to move up and down in the list with open documents. This mal<es it 
super easy to seiect the correct fiie. 

On the same diaiog box, you seea iist with aii active tooi windows. Ciici<ing oneof thewindowsin 
the iist shows it on-screen, moving it in front of other windows if necessary. 

To get a quicl< preview of a document without opening it for editing, clicl< the file you want to see in 
the Solution Explorer once. You can see that a file is in preview mode by its tab, which is docl<ed to 
the right of the row with tabs as opposed to the left for open files. 

At the bottom of the Document Window in Figure 1-9, you see three buttons called Design, Split, 
and Source. These buttons appear automatically when you're worl<ing with a filethat contains 
marl<up, such as ASPX and HTML pages. They enable you to open the Design View of a page (giv- 
ing you an idea of how the page will lool< in the browser), its M arl<up View (the HTML and other 
markup), or both at the same time. H ow this works is explained in more detail in Chapter 2, but for 
now, it's important to realize you can switch among M arkup. Split, and Design View by clicking one 
of thethree buttons. The M arkup View is also often called the SourceView or CodeView window. 
H owever, to avoid confusion with the code editor that is used to edit Code Behind files, this book 
uses the term M arkup View exclusively. 


The Start Page 

W henever you start up VS, the Start Page is loaded in the Document Window. With the Start Page, 
you can quickly create new and open existing websites and other projects. The Start Page also pro- 
vides a number of links to related news and information about web development. To reopen the 
Start Page, choose View o Start Page. 

To get a feel for how you can use all these windows, the following Try It 0 ut shows you how to 
build a simple web page that contains a few ASP.N ET Server Controls. 


QjQlQIQ Creating Your First ASP.NET Web Page 

This Try It Out exercise guides you through creating a new website with a single page that contains a 
number of ASP.N ET Server Controls. You see how to use windows like the Document Window and 
the Solution Explorer, and how to usetheToolbox and the Properties G rid to add ASP.N ET Server 
Controlsto the page and change their looks. 

1. Start VSEW or Visual Studio 2012. 

2. If you're using the Express edition, choose Tools o Settings and choose Expert Settings to turn on 
the developer profile that gives you access to the full feature set of VSEW. 

3. On the File menu choose N ew Web Site. Depending on configuration, you may have to choose File 
o New c Web Site instead. This triggers the New Web Site dialog box. 

4. In this dialog box, make sure that ASP.N ET Empty Web Site is selected and not the ASP.N ET Web 
Forms Site item that you used in a previous exercise. Ensure that File System is chosen in the Web 
Location drop-down list. Click OK to create the new site. 

5. Next, right-click the new website in the Solution Explorer. M ake sure you click the website 
(labeled WebSite2) and not the parent Solution element. It's the highlighted element in Figure 1-5. 
From the context menu that appears, choose Add o Add N ew Item. 
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In the new window that appears, click Web Form and typecontroisDemo as the name. TheASPX 
extension is added for you automatically when you clicl< the Add button. You can leave the other 
settings in the dialog box at their default settings. The page should open in M arkup View, show- 
ing you the default HTM L, like the <htmi>, <head>, <titie>, and <body> elements that VS adds 
there for you automatically when you create a new page. 

Switch the page to Design View by clicking the Design button at the bottom of the Document 
Window. 


8. 


9. 


10. 


If theToolbox isn't open yet, press Ctrl+Alt+X to open 
it or click theToolbox tab to show it and then click the 
pin icon in the top-right corner to maketheToolbox 
visible at all times. Drag a TextBox and a Button from 
the Standard category of theToolbox into the dashed 
area in the Design View of the page. You should end up 
with a Design View that looks similar to Figure 1-10. 

Right-click the button in Design View and choose 
Properties. In the Properties Grid, locate the Text property under 
the Appearance category (shown in Figure 1-11) and change it 
from Button to Submit Information. Assoon as you pressTab or 
click somewhere outside the Properties Grid, theDesign View of 
the page is updated and shows the new text on the button. 

Press Ctrl-ff 5 to open the page in your default browser. N ote 
that it's not necessary to explicitly save the changes to your 
page (although it's a good idea to do this often anyway using 
the shortcut Ctrl-f-S). As soon as you press Ctrl-ff 5 to run the 
page, VS saves all changes to open documents automatically. 
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Type some text in the text box and click the button. N ote that 
after the page has reloaded, the text is still displayed in the text box. Other than that, not much has 
happened because you didn't write any code for the button yet. 


How It Works 

W hen you dragged the Button and the TextBox from theToolbox on the page in Design View, VS 
added the corresponding codefor you in M arkup View automatically. Similarly, when you changed the 
Text property of the button in the Properties Grid, VS automatically updated the markup for the con- 
trol in M arkup View. Instead of using the Properties Grid, you could also have typed the text directly 
between the quotation marks of the Text property in M arkup View. 

After changing the Text property, your page should contain this code in M arkup View: 

<asp:TextBox ID="TextBoxl" runat= " server " ></asp : TextBox> 
<asp:Button ID="Buttonl" runat= " server " Text="Submit Information" /> 

W hen you press Ctrl-ff 5 to view the page in the browser, the web server receives the request, the page is 
processed by the ASP.N ET run time, and the resulting H TM L for the page is sent to the browser. 

After you type in some text and click the button, the same process is more or less repeated: The 
web server receives the request, the page is processed, and the result gets sent back to the browser. 
W hen you click the button, you cause a postback to occur, where any information contained in the 
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page — such as the text you typed in the text box — is sent baci< to the server. ASP.N ET reacts to the 
postbaci< by rendering the page again. H owever, this time it prepopulates controls, lil<e the TextBox, 
with the values that were sent to the page. 

Tal<e a lool< at the resulting H TM L for the page after the postback, using the browser's View Source 
command (rerun the page from VS by pressing Ctrl4f 5 if you already closed it). You should see code 
similar to this: 

<input name="TextBoxl" type="text" value="Hello World" id="TextBoxl" /> 
<input type=" submit" name="Buttonl" value="Submit Information" id="Buttonl" /> 

J ust as with the earlier example, you can see that the resulting HTML is substantially different from the 
original ASPX markup. 

Postbacks are an important concept in ASP.N ET, and you see more about them in other chapters, 
including Chapter 4. 


VSEW hosts many more windows and tool panels than those you have seen so far. The next section 
briefly touches upon some of the windows you'll most frequently use when building ASP.N ET web 
pages. All of the windows mentioned are accessible from the main View menu in VS or VSEW if 
you're using the Expert Settings mode. 

Informational Windows 

In addition to the windows that are visible by default when you start VS, many more windows are 
available. You see most of them in action in the remainder of this book, but some are worth high- 
lighting now. You access all windows that are discussed next from the main View menu. 

The Error List 

The Error List gives you a list of thethings that are currently somehow broken in your site, includ- 
ing incorrect markup in your ASPX or H TM L files and programming errors in VB or C# files. This 
window can even show you errors in XML and CSS files. The Error List shows its messages in three 
categories — Errors, Warnings, and M essages — that signify the severity of the problem. Figure 1-12 
showsthe Error List for a page that has some problems with itsCSSand XHTML. 
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The Output Window 

W hen you try to build your site using the Build menu, the Output window tells you whether or not 
the build succeeded. If the build failed, for example because you have a programming error, it tells 
you why the build failed. In the commercial versions of Visual Studio, the Output window is used 
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for other information as weii, induding tlie status of external plug-in programs. Building — or com- 
piling — websites is discussed later in this book, including in Chapter 19, which deals with deploy- 
ment of your website. 

The Find Results Window 

The Find and Replace features of VS are invaluable tools when it comes to managing the content of 
your site. You will often need to replace some text in the current document or even in the entire site. 
Find in Files (Ctrl+Shift4f) and Replace in Files (Ctrl4-Shift4+H ) both output their results in the Find 
Results window, as shown in Figure 1-13. 
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Because having several informational windows open at the same time may tal<eup precious screen 
space, it's often a good idea to docl< them. This way, only one of them is visible at a time, while you 
still have quick access to the others. You learn how to customize the IDE, including the docking of 
windows, next. 

CUSTOMIZING THE IDE 

Although the standard setup of Visual Studio and its tool windows is pretty useful, there's a fair 
chance you want to customize the IDE to your liking. You may want to move some of the windows 
to a location where they are easier to reach, or you may want to open additional windows you fre- 
quently use. Visual Studio is fully customizable and enables you to tweak every little detail of the 
IDE. In the next section, you learn how to perform the most common customization tasks. 

Rearranging Windows 

To give each window the location it deserves, you can drag and drop them in the main IDE . Simply 
grab a window's title bar or its bottom tab and drag it in the direction of the new location. 0 nee 
you start dragging, you see that Visual Studio gives you visual cues as to where the window will end 
up (see Figure 1-14). 

If you drag the window over one of the four square indicators at the sides of the middle indicator, 
the window will be docked next to the existing window. Once you drop it, the window pops to its 
new location. If you drop the window on the square in the middle of the large indicator, the window 
docks with that window, sharing the same screen space. Each window has its own tab, as you can 
see with the windows at the bottom of Figure 1-14. 

In addition to docking windows with others in thelDE, you can also have floating windows. To 
change a docked window into a floating one, drag it away from its current location and drop it 
somewhere in the IDE without hitting one of the visual cues on the screen. You can also choose 
Window o Float from the main menu or right-click the window's title bar and choose Float. 
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To restore a floating panel to its previous docl<ed location, riglit-clicl< its title bar and choose Docl< 
or choose W i ndow o D ocl< f rom the main menu . M al<e su re you don't choose D ocl< as Tabbed 
Document for the tool windows, lil<e the Toolbox or the Solution Explorer, or they'll end up in the 
main Document Window. This mal<es it difficult to use these tool windows together with an open 
file because the two windows will share the same space. 

Modifying the Toolbox 

You can modify the Toolbox as well. By default, the items are sorted alphabetically, but you can 
reorder them using drag and drop. To do this, open theToolbox (press Ctrl -fA I t-l-X ) and drag an 
item (such astheTexteox under the Standard category) to a different location. You can also delete 
itemsfrom theToolbox by right-clicl<ing them and choosing Delete from the context menu. Don't 
worry about items getting lost forever; you can reset theToolbox again by choosing Reset Toolbox 
from the same menu. 

You can also add your own items to theToolbox. The most common use for this is code snippets. 
Simply highlight some text or code in the Document Window and drag it to theToolbox. You can 
then right-clicl< the item and choose Rename Item to give it a more meaningful name that you can 
easily recognize. 

To avoid cluttering up theToolbox with your own code snippets, consider creating a separate cat- 
egory for them. You can do this by choosing Add Tab from the Toolbox's right-clicl< menu. Enter a 
name and press Enter, and your Toolbox tab is ready for use. 

In the next Try It 0 ut exercise, you get the chance to play around with the Visual Studio IDE so you 
can customize it to your lil<ing. 
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lljUHmg^Q Customizing the IDE 

In this exercise you practice opening and rearranging tlie windows in tlie VS IDE. Don't be afraid to 
mess tilings up. A iittie iater in tliis cliapter, instructions are given on liow to reset tine IDE to the way it 
waswiien you opened it tlie first time. 

1. If you ciosed your website since tlie previous Try It Out, open it again, or create a new one using 
tlie File menu. 

2. From tlieView menu, cliooseError List to open tlieError List window. If you don't see tlie Error 
List item directly, clioose Tools o Settings o Expert Settings first. N otice how the Error List gets 
doci<ed below the Document Window by default. 

3. From the same View menu, choose Tasl< List. By default, it is docl<ed in the same space as the Error 
List, with the tabs for both windows next to each other. 

4. Clicl< the tab of theTask List and, whileholding down your mouse button, drag theTasl< List 
away from itslocation in thedirection of the Document Window. Once you release the window, it 
appears as a floating window in the IDE. To restore the window, drag it bacl< on the center square 
of the Error List. To change the order in which tabs appear in a tab group, drag a tab over the 
other tabs and release it at the desired location. 

5. If you want, you can repeat the previous steps for other windows that are visible in the IDE by 
default or for the ones you find under the View menu. Spend some time familiarizing yourself with 
all the different windows and how you can arrange them on-screen. Because you'll be working a lot 
with these windows in the remainder of this book, it's good to be familiar with their locations. 

6. N ext, open the controisoemo.aspx page (or add a new ASPX first if you created a new website) 
from the Solution Explorer by double-clicking it. When the page opens, the Toolbox becomes vis- 
ible automatically. If it doesn't, press Ctrl -f-Alt-f-X to open it. 

7. Right-click theToolbox and chooseAdd Tab. TypeHTML Fragments as its new nameand press 
Enter. Thisaddsa new category to theToolbox that behavesjust likeall theothers. 

8. With the Document Window showing your ASPX page in M arkup View, type <hi> directly after 
the opening <div> tag. N ote that Visual Studio automatically inserts the closing </hi> for you. 
You should end up with code in M arkup View looking like this: 

<form id="forml" runat="server"> 
<div> 

<hl></hl> 

</div> 

9. H ighlight the opening and closing <hi> tags, and then drag the selection from the M arkup View 
window onto the new Toolbox tab you created in step 7. The selection shows up as Text: 

<hl></hl>. 

10. Right-click theToolbox item you just created, choose Rename Item, and type Heading i as the 
name. 


11. Put your cursor in the Document Window again and press Ctrl-H< directly followed by Ctrl-fO to 
format the document in the Document Window. Alternatively, choose Edit o Format Document 
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from the main menu. This formats the document according to the rules you have set in theText 
Editor Options dialog box. Formatting is also available for a number of other document types, 
including C#and VB.N ET code, and CSS and XML files. 

From now on, whenever you need a heading in your document in M arl<up View, simply place 
the cursor in the Document Window where you want the heading to appear and double-clicl< the 
appropriate heading in the Toolbox. 


NOTE This exercise serves as an example of adding code to the Toolbox. For 
an <hi> element, you might prefer to type the code directly in the code editor 
Alternatively, you could use a code snippet. Enter hi in the editor and then press 
Tab. Visual Studio expands the code for the heading to <hi></hi> and positions 
your cursor between the two tags so you can start typing the heading right away. 


How It Works 

M ost of the steps in this Try It Out are self-explanatory. You started off by opening a few windows that 
you frequently need when building websites. You then used the drag-and-drop features of the IDE to 
rearrange the window layout according to your personal preferences. 

You then added an H TM L fragment to a custom tab in theToolbox. W hen you drag any markup to the 
Toolbox, Visual Studio creates a Toolbox item for it that contains the selected markup. W henever you 
need a copy of that markup in your page, simply double-click the item or drag it from theToolbox into 
M arkup View. This is a great time saver for H TM L fragments that you frequently use. You typically 
use this technique for larger blocks of code; for elements like the <hi>. Visual Studio has a better tool 
called Code Snippets, which you meet later in this book. 

At the end you used Visual Studio's document formatting option to change the layout of the code in the 
document. This helps to keep the code organized and easier to read. You can fully change how the code 
isformatted by using theOptionsdialog box accessible through Toolso Options. Then expand the 
path Text Editor o H TM L o Formatting, and click Tag Specific 0 ptions. 


Besides the window layout and theToolbox, Visual Studio enables you to customizea lot morein 
the IDE. The following section explains how to customize three other important IDE features: the 
Document Window, toolbars, and keyboard shortcuts. 

Customizing tlie Document Window 

Visual Studio gives you great flexibility with regard to how text is displayed in the Document 
Window. You can change things like font size, font color, and even the background color of the 
text. You can access the Font and Colors settings by choosing Tools o Options, and then choosing 
Environment o Fonts and Colors. 

One thing I liketo customizein theDocument Window isthetab size, which controls the number of 
spaces that are inserted when indenting code. To change the tab size, choose Tools o Options, and 
then under Text Editor choose All Languages o Tabs. I usually set the Tab and Indent Size 
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to 2 spaces, leaving theother settings in tlieTab panel untouched. Another thing I like to customize 
is the number of line breal<s before and after HTML elements. T he 0 ptions window gives you full 
control over this: Select Text Editor o H TM L o Formatting and then click Tag Specific Options. 
In the list on the left you can select a tag and then with the settings on the right you can control 
how the tag is formatted. The Preview box makes it easy to see how the various settings change the 
formatting. 

With the exception of theTab Size being set to 2 and the number of line breaks around a few 
HTML elements, all screen shots in this book show the default setup of VSEW. 

Customizing Toolbars 

You can customize toolbars in three ways: you can show or hidethe built-in toolbars, you can add 
and remove buttons on existing toolbars, and you can create your own toolbars with buttons you 
often use. 

Enabling and Disabling Toolbars 

You disable and enable existing toolbars by right-clicking any existing toolbar or the menu bar and 
then selecting the appropriate item from the list. 0 nee the toolbar is displayed, you can use its drag 
grip at its left to drag it to a new location within the Toolbar area. 

Editing Existing Toolbars 

If you feel that an existing toolbar is missing an important button or that it contains buttons you 
rarely use, you can customize the buttons on thetoolbar. To do this, right-click any toolbar or the 
menu bar, choose Customize, switch to the Commands tab, and select thetoolbar you want to 
modify from theToolbar drop-down. With the command buttons at the right, you can add new and 
remove existing commands, or change their order. 

Creating Your Own Toolbars 

Creating your own toolbar is useful if you want to group some functions that you frequently use. To 
createa new toolbar, open theCustomize window as explained in the preceding section. Click the 
N ew button and type a name for thetoolbar. Then switch to the Commands tab and modify your 
toolbar as you would do with existing toolbars. 

Customizing Keyboard Sliortcuts 

Another setting many developers I ike to change is keyboard shortcuts. Keyboard shortcuts are a great 
way to save time because they enable you to perform a task with a simple keyboard command instead 
of reaching for the mouse and selecting the appropriate item from the menu. To change the keyboard 
shortcuts, chooseToolso Options, expand Environment, and click Keyboard. Locate the command 
for which you want to change the shortcut in the list of commands. Because this list contains many 
items, you can filter the list by typing a few letters from the command. For example, typing print in 
the Show Commands Containing field gives you a list of all print-related commands. 

N ext, in the Press Shortcut Keys field, type a new shortcut and click Assign. Visual Studio enables 
you to enter a double shortcut key for a single command. For example, you can bind the command 
Close A II Documents to the command Ctrl-H<, Ctrl-fO. To perform this command, you need to press 
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both key combinations in rapid succession. Aitliougli a double sliortcut i<ey may seem iii<e overi<iii, it 
greatiy increases tlie number of avaiiabiesliortcut i<eys. 

Resetting Your Changes 

Don't worry if you feei that you liave messed up Visuai Studio by trying out tlie numerous custom- 
ization options. You liave many ways to restore Visual Studio to its previous state. 

Resetting the Window Layout 

The command Reset Window Layout, accessible from theWindow menu, resets all windowsto the 
position they were in when you first started Visual Studio. This command is useful if you misplaced 
too many windowsand ended up with a cluttered IDE. 

Resetting the Toolbox 

if you removed an item from the Toolbox by mistal<e or even deleted an entire tab, you can reset the 
Toolbox to its original state by right-clicl<ing the Toolbox and choosing Reset Toolbox. You need to 
thinl< twice before you use this command because it also deletes all your custom code snippets. 

Resetting All Settings 

if you followed along with the previous Try It Out exercises, and then started experimenting with 
the customization possibilities, your IDE is now probably in one of two states: It either looks exactly 
the way you want it, or it looks like a complete mess. In the latter case, it's good to know that it is 
easy to clean up the chaos. 

To completely revert all Visual Studio settings to the way they were right after installation, choose 
Tools o Settings o Import and Export Settings or Tools o Import and Export Settings, depending 
on the version of VS you're using. Then choose the Reset All Settings option and click N ext. If you 
want, you can create a backup of the existing settings; otherwise, choose N o. Just Reset Settings. 
You get another screen that enables you to chooseamong a number of settings collections. Choose 
Expert Settings or Web Development because these options give you access to all the features you 
need to follow along with this book. Finally, click Finish. This action causes all settings to be reset 
to their defaults, including the window layout. Toolbox and Toolbox customizations, shortcut keys, 
and everything you may have changed in the Visual Studio 0 ptions dialog box. So, use this com- 
mand only when you're really sure you want a fresh, new setup of Visual Studio. 

W ith some basic knowledge about ASP.N ET pages and Visual Studio, it's time for some real action. 
In the next chapter, you see how to create ASP.N ET websites and web pages in much more detail. 
You learn how to organize your site in a logical and structured way, how to add the many different 
types of files to your site and how to use them, and how to connect the pages in your site. 

H owever, before you proceed to the next chapter, there is one more important topic you need to 
look at; the sample application that comes with this book. 

THE SAMPLE APPLICATION 

Building websites is what this book is all about, so it makes a whole lot of sense that this book 
comes with a complete and functional sample site that is used to showcase many of the capabilities 
of ASP.N ET. 


The Sample Application | 29 


The sample site you build in thisbool< iscalled Planet Wrox, a site that serves as an online commu- 
nity for people interested in music. The site offers the following features to its visitors: 

> Reviews about CDs and concerts that have been posted on the site by the administrator. 

The Gig Pics section, an online photo album where users can share pictures tal<en at concerts. 

>■ The ability to switch between the different graphical themes that the site offers, giving you a 
chance to change the look and feel of the site without altering the content. 

>• The ability to store musical preferences that influence the information users see on the site. 

>' Access to bonus features for registered users. 

The site enables the administrator (that is, you, the owner of the site) to do the following: 
Add and maintain the reviews. 
M anage the different musical genres in the system. 
>• M anage photo albums created by visitors to the site. 

Figure 1-15 shows the Planet Wrox homepage. 




Hi there visitor and welcome to the Planet Wrox website 


We're giad you're paying a visit to www.RanetWrox com, the coolest music community site on ttie Intemet. 


Feel free to tiave a look around; there are lots of interesting reviews and concert pictures to 6e found fiere. 


You can log in here 


FIGURE 1-15 


Figure 1-16 showsanother page from PlanetWrox, but with a different theme applied. Thispage 
enables users to enter their personal information and specify preferences with regard to their favor- 
ite musical genres. 


30 I CHAPTER 1 GETTING STARTED WITH ASP.NET 4.5 



You can find an online running example of the site at www.pianetwrox.com. There you can play 
around with the site from an end user's perspective. 

You can also download the source for the sample application and all other examples from this bool< 

from the Wrox website at www.wrox. com/remtitle . cgi?isbn=11183118 0 9. 

By the end of this bool<, you'll be able to build all of the functionality from the sample site (and 
hopefully even more) in other websites. Don't worry if it sounds lil<e an awful lot of complex things. 
I guide you, step by step, from the beginning of the application all the way to the last feature. As 
long as you l<eep having fun doing this, I'm sure you'll mal<e it all the way. 

PRACTICAL TIPS ON VISUAL STUDIO 

M ost of the chapters in this bool< end with a short section of useful tips. These are tips that either 
didn't fit in anywhere in the text or encourage you to further explore or test out things. Sometimes 
they may seem irrelevant or hard to understand at first, but you'll find that as you mal<eyour way 
through this bool< and lool< back at tips from previous chapters, things start to mal<e sense. Don't 
worry if you don't understand certain things completely the first time you see them. G ive the idea 
some thought and revisit the topic a few days later. H opefully, by letting the ideas sinl< in a little, 
things start to mal<e more sense automatically. This applies not only to the Practical Tips section, 
but to the entire bool<. 
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Before you move on to the next chapter, play around with Visual Studio some more. Add a 
couple of pages to your site, drag and drop some controls from the Toolbox onto your pages, 
and view them in your browser. That way, you'll have a better understanding of the tools 
and the many controls available when you start the next chapter. 

>• Familiarize yourself with the many options to tweal< theVisual Studio IDE. When building 
websites, you spend most of your time in this IDE, so it mal<es sense to tweak it as much 
as possible to your liking. Don't be afraid to mess it up; you can always revert to previous 
settings. 

>- Take some time to browse through the settings you find in the Options dialog box of Visual 
Studio (accessible through theToolso Options menu). M any of the settings are self-explana- 
tory and can really help in further tweaking the IDE. 


SUMMARY 

This chapter covered a lot of important ground to get you started with ASP.N ET 4.5 and Visual 
Studio. It started off with a brief history of the M icrosoft .N ET Framework in general and ASP 
.N ET in particular. 

You then learned how to acquire and install Visual Studio, which is the most extensive and versatile 
tool available for creating ASP.N ET 4.5 web pages. To enable you to work with it effectively, this 
chapter showed you how to use and customize the main features of the IDE. In subsequent chapters, 
you use and extend this knowledge to work with the many tools found in VS. 

It's important to understand how a page in Visual Studio makes it to your web browser. Some 
knowledge of the web server that serves the request and how the page is processed to deliver the 
final H TM L in the browser is critical to understanding ASP.N ET. This chapter gave you a short 
introduction to the way a web page is requested and served to the browser. 

In the next chapter, you get a much more detailed explanation of creating websites. 


EXERCISES 


1. Explain the differences between the markup of a page in Visual Studio and the final HTML page in 
the browser. 

2. Imagine you have a number of HTML fragments that you expect to use a lot throughout the site. 
What's the best way to make these fragments available in Visual Studio? 

3. Name three ways you can reset some or all of the IDE customization settings. 

4. If you want to change the property of a control on your page, for example the text of a button, 
which two options do you have available to make the change? 

You can find answers to these exercises in Appendix A. 


32 I CHAPTER 1 GETTING STARTED WITH ASP.NET 4.5 


► WHAT YOU LEARNED IN THIS CHAPTER 


Attribute 

Extra information in a tag to define or chiange its behavior 

Element 

A pair of tags hiolding some text or othier content 

HTML 

HyperText IVlarl<up Language: tlie language tiiat browsers use to display 


a web page 

HTTP 

HyperText Transfer Protocol: the protocol by which web browsers and 


web servers communicate 

IDE 

Integrated development environment: an integrated collection of applica- 


tions and tools to develop applications 

JavaScript 

A programming language used to interact with a web page in the client's 


browser 

Tag 

Text surrounded by angle bracl<ets to create HTML elements 

Visual Studio 2012 

The development environment to build .NET applications 


Visual Studio Express The free version of Visual Studio that enables you to build ASP.NET web 
2012 for Web applications 


Building an ASP.NET Website 


WHAT YOU WILL LEARN IN THIS CHAPTER: 


>• The different project types you can choose from as a starting point 
for your ASP.NET websites 

>• The different project templates that are available to jump-start your 
site development 

>" The numerous file types available in ASP.NET and what they are 
used for 

>" Ways to create structured websites that are easy to manage, now 
and in the future 

>• How to use the designer tools to create formatted web pages 
WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 
www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the Chapter 2 download. 

To create good-looking, functional, and successful websites, you have to understand a number 
of important technologies and languages, including H yperText M arkup Language (HTM L), 
ASP.N ET, cascading stylesheets (CSS), a server-side programming language such as C#or 
VB, and a client-side language such as JavaScript. This and upcoming chapters provide a solid 
foundation in these technologies, so you should be comfortable with the most important con- 
cepts once you've finished this book. 

Besides these technologies, you also have to understand theVisual Studio IDE that was intro- 
duced in the previous chapter. You need to know how to create sites, add pages, and manage 
all the toolbars and windowsthat Visual Studio (VS) offers you. In addition, you need to 
know how to build and design web pages in VS with H TM L and server controls. 
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This chapter shows you, in detail, how to create and manage your websites. It aiso shows you how 
to create your ASP. N ET web pages and add markup to them, enabling you to create useful web 
pages that can present information to users and react to their response. 

Although you already created your first ASP. N ET website in the previous chapter, this chapter starts 
off with another in-depth look at creating a new website. Because you have many choices to make 
when you start a new site, it's important to understand all the different options and pick the right 
one for your scenario. 

CREATING WEBSITES WITH VISUAL STUDIO 2012 

The preceding chapter gave you a quick overview of creating a website in VS. You simply chose N ew 
Web Site from the File menu, selected a language, selected the standard ASP.N ET Web Forms Site 
template, and clicked OK . H owever, there's more to the N ew Web Site dialog box than you saw in 
the previous chapter. You may have noticed that you can choose among a number of different tem- 
plates that enable you to create different kinds of sites. But before looking at the different templates 
on which you can base your new website, you need to know a little more about the different project 
types that are available in VS. 

Different Project Types 

in Visual Studio 2012 you can choose between two types of projects for creating ASP.N ET Web 
Forms websites: Web Application Projects and Web Site Projects. 

Web Application Projects 

Web Application Projects make it easier for developers who work in teams or who need more con- 
trol over the contents of the site and their compilation and deployment processes to build websites 
with VS. The whole website is managed as a project, with a single project file that keeps track of all 
the content of the website. 

In VS, you create a new Web Application Project through the File o N ew Project dialog box. In 
that dialog box, click your preferred programming language (either Visual Basic or Visual C#) 
and click the Web category, where you'll find a number of ASP.N ET web application templates. 
0 ne of the available project templates is the ASP.N ET M VC 4 Web Application, which creates an 
application based on the M odel View Controller pattern, another popular style of web application 
development. M VC is not used or discussed in this book, but if you want to learn more, check out 

www . asp . net/mvc. 

Web Site Projects 

Web Site Projects represent a project in VS for a website. You create a new Web Site Project by 
choosing Fileo N ew Web Site or Fileo N ew o Web Site from Visual Studio's main menu. 

A Web Site Project site is simply a Windows folder with a bunch of files and subfolders in it. There is no 
collective file (known as the project file with a .vbproj or .csproj extension) that keeps track of all 
the individual files in the website. You just point VS to a folder, and it instantly opens it as a website. 
Thismakesitvery easy to create copies of the site, move them, and share them with others, because no 
dependencies exist with files on your local system. Because of the lack of a central project file, Web Site 
Projects are usually simply referred to as websites, which is the term I use in the remainder of this book. 
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Choosing between Web Site Projects and Web Application Projects 

Because you have two options to choose from, you may be wondering which project type you should 
picl<. In general, the Web Site Project is a bit easier to work with. Because it's just a folder, it's easier 
to copy the files to a different location, such as another development workstation or a production 
server. Also, changes to the code files are picked up by the web server and applied automatically 
without a formal deployment process. The Web Application Project, on the other hand, works better 
if you work with a team of developers on the same site, because it dictates a more formal develop- 
ment and deployment process and has better support for working with Source Control versioning 
systems, such as M icrosoft'sTeam Foundation Server. 

This book uses the Web Site Project model because it's easier to work with if you're new to ASP 
.N ET. H owever, you'll find that sites built using theWeb Application Project model havea lot in 
common with Web Site Projects, which meansyou can use the knowledge you gain from this book 
to build sites with the Web Application Project model as well. You must usetheWeb Site Project 
model if you want to follow along with this book. W hen not referring to a specific project type, I'll 
use the terms website and web application interchangeably throughout this book when referring to 
websites in general. 

N ow that you know about the different project models, the next thing to consider is the different 
website templates and their options. 

Choosing the Right Website Template 

The N ew Web Site dialog box in VS contains different website templates, each one serving a distinct 
purpose. 

Figure 2-1 shows the N ew Web Site dialog box in VS. You can open this dialog box by choosing File 
o N ew Web Site or Fileo N ew o Web Site, depending on your version of VS. If your dialog box 
doesn't look like Figure 2-1, make sure you chose Fileo N ew Web Site and not Fileo N ew Project. 


!■ Recent 
' Installed 

^ Templates 

Visual Basic 
Visual C« 
Samples 

Online 


File System 


New Web Site 


CAUsersMmaADocumentsWisual Studio 2012\WebSite ■ 


.NET Framework 4.3 - Sort by: Default 



ASP.NET Empty Web Site 

Visual Basic 1 


ASP.NET Web Forms Site 

Visual Basic 

if 

ASP.NET Web Site (Razor vl) 

Visual Basic 

m 

ASP.NET Web Site (Razor v2) 

Visual Basic 

m 

ASP.NET Dynamic Data Entities Web Site Visual Basic 

VB 

WCF Service 

Visual Basic 


' |:~[ Search installed Templates i.C - 

Type: Visual Basic 
An empty Web site 


OK 


Cancel 


FIGURE 2-1 
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In the left-hand section you can choose between Visual Basic and Visual C#as the programming 
language for your site. The section in the middle shows the ASP. N ET website templates that are 
installed by default. Each of them is discussed in the next section. W hen you have created your own 
templates (which you learn how to do in Chapter 6), or have templates installed from other parties, 
they show up in this area as well. 

The ASP. N ET Empty Web Site template is used throughout this bool< for the Planet Wrox website. 
The others are described briefly in the following sections so you l<now how they can be used. The 
exact list of installed templates on your system depends on the version of Visual Studio and the 
installed components. Don't worry if you have other templates as long as you have the ASP.N ET 
Web Forms Site and the ASP.N ET Empty Web Site items. 

ASP.NET Web Forms Site 

This template enables you to set up a basic ASP.N ET website. It contains a number of files and fold- 
ers to jump-start the development of your site. The different file types are all discussed later in this 
chapter. The special App_Data folder and the functionality of the pages in the Account folder are 
discussed later in this bool<. 

This template is a good starting point once you start developing real-world ASP.N ET websites. 

ASP.NET Web Site (Razor v1 / Razor v2) 

You use these templates to create sites using M icrosoft's Web Pages frameworl<. You can learn more 
about Web Pages in my bool< Beginning ASP.N ET Web Pages with WebM atrix (Wrox, 2011, ISBN : 
978-1-118-05048-4). 

ASP.NET Empty Web Site 

The ASP.N ET Empty Web Site template gives you nothing but a single configuration file (web 
.config). The ASP.N ET Empty Web Site template is useful if you have a bunch of existing files you 
want to use to create a new website or when you want to create your site from scratch. You use this 
template as the basis for the sample website you build in thebool< and add files and folders as you 
progress through the bool<. 

ASP.NET Dynamic Data Entities Web Site 

This template enables you to createa flexibleyet powerful website to managedata in a database 
without a lot of manual code. This template is not discussed in this bool<, but you learn more about 
the M icrosoft ADO.N ET Entity Frameworl< that is used by the template in Chapter 14. 

WCF Service 

This template enables you to createa website containing one or more W indows Communication 
Foundation (WCF) Services. A WCF Service is somewhat similar to a web service in that it enables 
you to create methods that are callable over a networl<. H owever, WCF Services go much further 
than simple web services and offer you a lot more flexibility. You see how to create and consume a 
web service from a browser in Chapter 10. 


Creating Websites with Visual Studio 2012 | 37 


A Ithough it seems you have to make a clear choice up front for the right website template, this isn't 
reaiiy the case. BecauseanASP.NET websitein VSisessentiaiiyjusta reference to afoider, it's easy 
to add types from one template to another. For example, it's perfectly acceptable (and very common) 
to add a web service file to a standard ASP.N ET Web Forms Site or an ASP.N ET Empty Web Site, as 
you see in Chapter 10. 

Creating and Opening a New Website 

You have a number of different ways to create new and open existing websites. The choices you have 
here are largely influenced by the way you access the website (either on your local machine with 
Visual Studio on it or on a remote machine), and whether you want to use I IS Express (the built-in 
web server that ships with VS) or the full version of IIS— the web server that comes with Windows. 

All the examples in this bool< assume that you open sites from your local hard drive and that you 
use IIS Express, a trimmed down version of IIS, because it's very convenient to develop sites with it. 
H owever. Chapter 19 shows you how to use and configure the full version of I nternet Information 
Services, or I ISfor short. This advanced web server comes with most editions of Windows and is 
mostly used for production hosting of your websites on the server editions of Windows, because it's 
capable of serving web pages in high-traffic scenarios. 

Creating New Websites 

The next Try It Out section guides you through creating the Planet Wrox website, which is the proj- 
ect you worl< on in this bool<. All exercises in the remainder of the bool< assume you have this web- 
site open in VS, except where stated otherwise. The exercise instructs you to store your website in a 
folder called c:\BegASPNET\site. Take note of this folder name, because it's used throughout this 
book. If you decide to use a different folder, be sure to use your own location whenever you see this 
folder namein the book. Also makesureyou don't use special characters I ike the hash (#) or insert 
a space in the folder name because you'll run into trouble when developing your site. Finally, make 
sure you don't create this folder under your Windows Documents folder (typically at c:\users\ 
userName\Bocuments), because you'l I run into problems later when accounts other than your own 
need access to your site. 

^^^^^Q Creating a New ASP.NET 4.5 Website 

1. Start by creating a folder called BegASPNET in the root of your C drive using Windows Explorer 
or M y Computer. Inside the folder, create another folder called site. You should end up with a 
folder called C:\BegASPNET\site. If you followed the instructions from the "Introduction" sec- 
tion of this book and unpacked the source for this book, you already have the BegASPNET folder, 
which in turn contains the Source and Resources folders. You still need to create the site folder, 
though. If you want to follow along with VB.N ET and C#at the same time, you can create two 
folders, BegASPNETVB and BegASPNETcs, and use two instances of Visual Studio. 

2. Start Visual Studio and chooseFileo New Web Siteor Fileo New c Web Site, depending on 
your version of VS. 
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COMMON MISTAKES Don't mistakenly create a new Web Application Project 
using File O New Project, because this project template is not compatible with 
the exercises in this book. 


3. In the target framework drop-down list at the top of the screen, select .N ET Framework 4.5. 

4. In the Installed Templates area on the left, choose between Visual Basic and Visual C#. All the 
examples in this book are shown in both programming languages, so you can choose the one you 
like best. 

5. In the area in the middle select ASP.N ET Empty Web Site. 

6. In the Web Location drop-down list, make sure that File System is selected. The other two options 
(HTTP and FTP) enable you to open a site running on IIS (either on your local machine or on a 
remote server using the so-called M icrosoft FrontPage Server Extensions) and open a site from an 
FTP server, respectively. 

7. Click the Browse button next to the location text box, browse to c:\BegASPNET\site (the folder 
you created in the first step of this exercise), and click Open. 

Your final screen should look like the one in Figure 2-2, except that you may have chosen Visual 
C# instead of Visual Basic. 



New Web Site 


.NET Framework 4.5 - Sort by; Default 


ASP.NET Empty Web Site 


g_j ASP.NET Web Forms Site Visual Basic 
l@l ASP.NET Web Site (Razor v1) Visual Basic 
P]' ASP.NET Web Site (Razor v2) Visual Basic 
ASP.NET Dynamic Data Entiti... Visual Basic 

VB 

WCF Service Visual Basic 


11" := Search Installed Te fi- 


Type: Visual Basic 
An empty Web site 


File System - C;\BegASPNET\Site 


8. 


FIGURE 2-2 

Click OK and VS creates the new site for you. 
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How It Works 


As soon as you click OK, VS creates a new, empty website for you. Tliis 
new website contains notliing but a configuration file (called web. con- 
fig). In the Solution Explorer, your website now looks lil<e Figure 2-3. 
If you don't see the top-level Solution node, choose Tools o Options 
in VS, and in the Projects and Solutions category select Always Show 


Solution Explorer 




Search Solution Explorer {Ctrl+;) 


5!] Solution 'Site' (1 project) 


^ ©Site 

0 Web.config 


Solution. FIGURE 2-3 

Because a website based on the Empty Web Site template is just a simple W indows folder that VS looks 
at, the actual folder on disk contains the same file. No additional files are used to create the site, as 
shown in Figure 2-4, which shows File Explorer displaying the files in the folder C: \BegASPNET\site. 


Home Share View 


Navigation 
pane - 


□3 Preview pane 
□I Details pane 


■J Extra iarge icons ^ Large icons 
lHj Medium Icons Small icons 
IS List " 


: Details 


iH^t [□]' □ Item check boxes 

[1]' S File name extensions 
Sort Hide selected 

by CD U Hidden Items items 


Options 


Layout 


Current view/ 


Show/hide 


^ > Computer ► Local Disk (Ci) > BegASPNET > Site 


V Q I I Se 

Date modified Type 


Computer 
Local Di!i< (C:) ^ 
. BegASPNET 
Site 

1 item 


Q Web.config 


7/5/2012 1:30 PM XML Configuratio... 


1=1=1 


FIGURE 2-4 


If you don't seethe .config extension of the web file, don't worry. You see how to view file exten- 
sions in a later exercise. 

Asyou progress through this book, you'll add new files and folders to the site. These additional 
files and folders show up in the Solution Explorer and will appear in the Windows folder at C: \ 

BegASPNET\Site aS Well. 

Opening websites based on the Web Site Project template is very similar to creating new ones. In the 
next section, you get a quick overview of opening existing sites in VS. 

Opening Existing Websites 

Just as with creating new sites, opening an existing site in VS gives you a few options with regard 
to the source location of the website. You can choose to open a site from the local filesystem, from 
a local IIS web server, from a remote server using FTP, from a remote site using the M icrosoft 
FrontPage Server Extensions, or from a central Source Control system such as M icrosoft'sTeam 
Foundation Server. Figure 2-5 shows the Open Web Site dialog box in VS. 


40 I CHAPTER 2 BUILDING AN ASP.NET WEBSITE 


Open Web Site 


File System 


Local IIS 


Remote Site 

1^ 

Source 
Control 


File System 

Select the folder you want to open. 


I Desktop 

> Libraries 

> «^ Homegroup 

> A Imar 

J Computer 
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> J , PerfLogs 

> j. Program Files 

> J. TestMail 
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> J , Windows 

> <^ CD Drive (DOViitualBox Guest Additions 
I> tii CD Drive (t) 

> ^ Network 

> Recycle Bin 


Folder 


0\BegASPNET\Site 


Open Cancel 


FIGURE 2-5 


To get to this dialog box, clioose Fileo Open Web Site in VS (don't accidentaiiy clioose Fiieo 0 pen 
Project because tliat menu item is used to open Web Application Projects instead). All the examples 
in thebool< assume that you always open the Planet Wrox website from thelocal filesystem, using 
the File System button, which is the first button in the left column of the window. Then in the right 
pane, locate your website (c: \BegASPNET\site in this example) and click the Open button. 

The site you created in the previous Try It 0 ut is a very bare-bones site. To mal<e it more useful, you 
need to add files to it. The many file types you have at your disposal and the way they are added to 
the site are the next topics of discussion. 


WORKING WITH FILES IN YOUR WEBSITE 

An ASP.N ET 4.5 Web Forms Site consists of at least a single Web Form (a file with an .aspx exten- 
sion), but usually it consists of a larger number of files. M any different file types are available in VS, 
each offering a distinct functionality. In the next section, you seethe most important file types that 
are used in VS. In addition, you learn a few different ways to add these files to your site. 
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The Many File Types of an ASP.NET 4.5 Website 

To give you an idea of iiow many different fiies you can use in ASP.N ET, Figure 2-6 sliowstiie dia- 
log box tiiat enables you to add new files to the site (accessible by right-clicl<ing your website in the 
Solution Explorer and choosing Add o Add N ew Item or by choosing Website o Add N ew Item 
from the main menu). 
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Visual C* 
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FIGURE 2-6 


To make it easier to find the type of file you're lool<ing for, you can use the search box at the top- 
right corner of the dialog box. Simply enter a few letters of the type you're looking for and hit Enter. 
VS filters the list of files to those matching your search phrase. 

The files you can add to a site can be grouped in a few different categories. The most important 
files— the ones you use throughout the examples in this book— are discussed next. 

Web Files 

Web files are specific to web applications and can either be requested by a browser directly, or are 
used to build up part of the web page that is requested in the browser. The following table lists the 
various web files you typically use in an ASP.N ET Web Forms website and their extensions, and 
describes how each file is used. 
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FILE TYPE 

EXTENSION 

DESCRIPTION 

Web Form 

. aspx 

The workhorse of any ASP.NET website; represents the 
pages that your users view in their browsers. 

Master Page 

.master 

Enables you to define the global structure and the look and 
feel of a website. You see how it can be used in Chapter 6. 

Web User Control 

. ascx 

Contains page fragments that can be reused in multiple 
pages in your site. Chapter 8 is entirely devoted to user 
controls. 

HTML Page 

.htm /.html 

Can be used to display static HTML in your website. 

Style Sheet 

. CSS 

Contains CSS code that enables you to style and format 
your website. You learn more about CSS in Chapter 3. 

Web Configuration 
File 

. conf ig 

Contains global configuration information that is used 
throughout the site. You see how to use the web . conf ig 
later in this book, starting with Chapter 4. 

Site Map 

. sitemap 

Contains a hierarchical representation of files in your site in 
an XML format. The site map is used for navigation and is 
discussed in Chapter 7. 

JavaScript File 

. js 

Contains JavaScript that can be executed in the client's 
browser. 

Skin File 

. skin 

Contains design information for controls in your website. 


Skins are discussed in Chapter 6. 


The next Try It 0 ut exercise shows you how to add a new master page to the site, which is used 
throughout the bool<. 


TRY IT OUT 


Adding Files to Your Site 

1. If it is not still open, open the Planet Wrox website you created earlier by choosing Fileo Open 
Web Site. M ake sure that you open the site from thefilesystem, locate the folder that contains your 
site (c:\BegASPNET\site), and clicl< the 0 pen button. 

2. In the Solution Explorer, right-clicl< your site and choose Add o N ew Folder. 


COMMON MISTAKES Make sure you click the actual site and not the 

Web . conf ig file Or the Solution node at the top (see Figure 2-3) or you won't get 

the correct menu Item. 
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3. TypeMasterPages as the name of the folder and press Enter. Then right-click this new folder 
and choose Add o Add N ew Item. Alternatively, you can choose File o N ew File or Website o 
Add N ew Item from Visual Studio's main menu, or you can clicl< the new folder in the Solution 
Explorer once to put the focus on it and then press Ctrl +Sh if t+A. 

4. In the dialog box that appears, clicl< M aster Page and type Frontend as the name. VS automati- 
cally adds the .master extension for you when you add the file. Verify that under Installed 
Templates you have selected the language you want to use for this site and that Place Code in 
Separate File in the bottom-right corner ischecl<ed. Finally, clicl< the Add button. The master page 
is added to the site, and is opened automatically for you in the Document Window. 

How It Works 

This simple exercise showed you how to add a new item to your website. Although at this stage the 
site isn't very exciting yet, the file you added forms the basis for the rest of the bool<. The next sections 
briefly lool< at the remainder of the file types. 


Code Files 

Adding code files to the site is identical to how you add web files. The following table describes the 
various types of code files. 


FILE TYPE g^g^ 

EXTENSION 

DESCRIPTION ^iiii^^i^^mniiiniiiiiimmmiin 

WCF Service 

. SVC 

Can be called by other systems, including browsers, 
and can contain code that can be executed on your 
server. WCF services are covered in Chapter 10. 

Class 

. cs / . vb 

Can contain code to program your website. Note that 
Code Behind files (discussed later) also have this 
extension because they are essentially class files. C# 
uses files with the . cs extension and Visual Basic uses 
. vb files. 

Global Application 
Class 

. asax 

Can contain code that is fired in response to interesting 
things that happen in your site, such as the start of the 
application or when an error occurs somewhere in the 
site. You see how to use this file in Chapters 11 and 18. 


Besides the Code Files category, there is one more group of filesworth lool<ing into: Data Files. 
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Data Files 

Data files are used to store data that can be used in your site and in otiier applications. Tiie group 
consists of tlieX M L files, database files, and files related to worl<ing with data. 


FILE TYPE 

EXTENSION 

DESCRIPTION ^^^^^^^^ 

XML File 

. xml 

Used to store data in XML format. In addition to plain XML files, 
ASP.NET supports a few more XML-based files, two of which you 
briefly saw before: web . conf ig and the site map. 

SQL Server 
Database 

.mdf 

Files with an .mdf extension are databases that are used by 
Microsoft SQL Server. Databases are discussed in Chapter 12 
and later. 

ADO.NET 
Entity Data 
Model 

. edmx 

Used to access databases declaratively, without the need to 
write a lot of repetitive code. Technically, this is not a data file, 
because it does not contain the actual data. However, because 


it is tied to the database so closely, it makes sense to group it 
under this header. You learn more about the ADO.NET Entity 
Framework in Chapter 14. 


As you saw in the previous Try It Out, adding a new file of any of these types is really easy. It's just 
as easy to add existing files to the site. 


Adding Existing Files 

N ot every file you create in your website has to be brand new. In some cases it mal<es sense to reuse 
files from other projects. For example, you may want to reuse a logo or a CSS file across multiple 
sites. You can easily add existing files by right-clicl<ing the website in the Solution Explorer and 
choosing Add oAdd Existing Item. In the dialog box that appears, you can browse for the files, 
and optionally select multiple files by holding down the Ctrl key. Finally, when you clicl< Add, the 
files are added to the website. You can also use copy and paste to copy files from a folder on your 
local disl< to a website in VS. Simply highlight the files in Windows Explorer, press Ctrl -fC to copy 
the files, switch to VS, clicl< thewebsitein the Solution Explorer (or on a subfolder of your site), and 
press Ctrl-iV. Thefiles are then copied into your website's folder. 

H owever, there is an even easier way to add files to the site, which can be a great time saver when 
you need to add multiple existing files and folders to your site: drag and drop. The following Try It 
0 ut shows you how this worl<s. 


TRY IT OUT 


Adding Existing Files to Your Site 


In Windows, minimize all open applications, right-clicl< your desktop, and choose N ew c Text 
Document. If you don't see this option, simply create a new text document using N otepad and save 
it on your desktop. 
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2. Rename the file styles, ess. M ake sure the .txt extension is repiaced by .ess. If you don't see 
the initial .txt extension and the icon of the file doesn't change from a text file to a CSS file (by 
default this is the same icon as a text file with a gear symbol on top of it, but you may have soft- 
ware installed that changed the icon for CSS files), Windows is configured to hide extensions for 
l<nown file types. If that's the case, open up Windows Explorer in Windows 7, clicl< the Organize 
button, and then chooseFolder and Search Options. Switch to theView tab and deselect the option 
labeled H ide Extensions for Known File Types. For Windows 8 you find the option called File 

N ame Extensions on the View tab of the Ribbon bar of the File Explorer, shown in Figure 2-4. 
You now may need to change the name of the file from styies.css.txt to styles, ess. 

W hen you change the file extension from .txt to .ess, W indows may give you a warning that 
the file becomes unusable if you proceed. You can safely answer Yes to this question to continue. 

3. Rearrange VS so you can see part of the desktop with the CSS file as well. You can use the Restore 
Down button next to the Close button on the Windows title bar of VS to get it out of full screen 
mode. 

4. Click theCSSfileon thedesktop and, whileholding down the mouse button, drag the file into the 
Solution Explorer. M ake sure you drag the file into the Solution Explorer and not into other parts 
of VS, or the file won't be added. For example, when you drag it into the Document Window, VS 
simply opens the file for you, but doesn't add it to the site. 

5. When you release the mouse while over the website node or an existing file in the Solution 
Explorer, the CSS file is added to your site. 


NOTE If you are using Windows 7 and run VS as an administrator, this might 
not worl< because Windows doesn't aliow the Windows Expiorer and VS to com- 
municate. In that case, add existing files using the Add Existing Item menu dis- 
cussed earlier or use copy and paste. 


How It Works 

Although this seems to be a simple exercise that uses basic Windows skills, it serves to show that VS 
creates a copy of the file when it adds it to the site. So, the original styles, ess file on the desktop is 
not affected when you make changes to the copy in VS. This way, it's easy to drag and drop files from 
existing websites into your new one without affecting the originals. The same applies to files you add 
using theAdd Existing Item dialog box in VS. 


If you have added files to your website's folder outside of VS, they may not show up right away. 
You can get a fresh copy of the file list by clicking the Refresh button on the Solution Explorer's 
toolbar. 
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Organizing Your Site 

Because of the many files that make up your site, it's often a good idea to group them by function in 
separate folders. For example, all style sheet files could go in afolder called styles, .js files could 
go in Scripts, user controls could go in a controls folder, and master pages could be stored in a 
folder called MasterPages. This is a matter of personal preference, but structured and well-orga- 
nized sites are easier to manage and understand. The next Try It Out explains how you can move 
files around into new folders to organize your site. 


TRY IT OUT 


Organizing Your Website 

1. Right-click the Planet Wrox site in the Solution Explorer and choose Add o N ew Folder. 

2. Type styles as the new folder name and press Enter. 

3. Create another folder, called controls. These two folders are used in the remainder of this book. 

4. Drag the styles, ess file that you added earlier and drop it into the styles folder. 
If everything went well, your Solution Explorer should look like Figure 2-7. 
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FIGURE 2-7 


If your Solution Explorer looks different from the one shown in Figure 2-7, follow this Try It Out 
again until your site looks exactly the same, with the same folder structure and files in it. Future 
Try It Out exercises in this book assume you have the correct folders and files in your website. 

How It Works 

Structure and organization are important to keep your sites manageable. Although you may be tempted 
to add all of your files to the root of your project, it's better not to do this. With a very small site, you 
may not notice any difference, but as soon as your site begins to grow, you'll find it becomes a lot 
harder to manage when it lacks structure. Placing related files in separate folders is the first step to an 
organized site. Storing files of the same type in a single folder is only oneway to optimize your site. In 
later chapters, you see that separate folders are also used to group files with similar functionality. For 
example, all files that are accessible only by an administrator of the site are grouped in a folder called 

Management. 
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The drag-and-drop features of VS make it easy to reorganize your site. Simpiy pici< up one file or 
muitipiefiies and drop them in their new location . If you continue to apply these kinds of organiza- 
tion practices while expanding your site, you'll find that tomorrow or six months from now, you 
won't have any problems locating the right file when you need it. 

Special File Types 

Some of the files listed in the previous section require that you put them in a special folder instead of 
the proposed optional organizational folder structure. The IDE warns you when you try to add a file 
outside of its special folder, and offers to create the folder and put the file there. For example, when 
you try to add a class file (with a .vb or .cs extension), you get the warning shown in Figure 2-8. 


Microsoft Visual Studio Express 201 2 for Web 

You are attempting to add a special file type (ADO.NET Entity Data 
I V Model) to an ASP.NET Web site. In general, to use this type of item in 
your site, you should place it in the 'App_Code' folder. Do you want to 
place the file in the 'App_Code' folder? 


Yes No Cancel 


FIGURE 2-8 

W hen you get this dialog box, always click Yes. Otherwise, your file won't function correctly. You 
get similar dialog boxes for other file types, including skin and database files. 

N ow that you have a good understanding of the different types of files that make up your website, 
it'stimeto look atoneof them in much moredetail; .aspx files, also known asWeb Forms. 


WORKING WITH WEB FORMS 

Web Forms, represented by .aspx files, arethecoreof anyASP.N ET 4.5 Web Forms website. They 
are the actual pages that users see in their browsers when they visit your site. 

As you saw in the previous chapter, Web Forms can contain a mix of H TM L, ASP.N ET Server 
Controls, client-sideJavaScript, CSS, and programming logic. To makeit easier to see how all this 
code ends up in the browser, VS offers a number of different views on your pages. 

The Different Views on Web Forms 

VS enables you to look at your Web Form from a few different angles. W hen you have a file with 
markup— like a Web Form or master page— open in the Document Window, you see three buttons 
at the bottom-left corner of the window. With these buttons, visible in Figure 2-9, you can switch 
between the different views. This figure shows a master page, which you'll learn more about in 
Chapter 6. 
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Frontend. master -0 X 


<X@ Master Language="VB" CodeFile="Frontend. master. vb" Inherits="MasterPages_Frontend" %> ^ 
<!DOCTYPE htinl> 
E]<html xinlns=" http://www.w3.org/1999/xhtiwl "> 
B<head runat="server"> 
<title></title> 

<asp:ContentPlaceHolder IO="head" runat="server"> 
</asp:ContentPlaceHolder> 
</head> 
E<body> 

B <form id="fonBl" runat="server"> 
B <div> 

<asp: Content Placeholder ID="ContentPlaceHolderl" runat="server"> 
</asp:ContentPlaceHolder> 
</div> 
</form> 
</body> 
</htiiil> 
100% • < 


c« Design | HI Split <» Source 


FIGURE 2-9 


SourceView is the default view wlien you open a page. It shows you the raw HTML and other 
markup for the page, and is very useful if you want to tweak the contents of a page and you have a 
good idea of what you want to change and where. As I explained in the previous chapter, I use the 
term M arkup View rather than SourceView to refer to the markup of ASPX and HTM L pages. 

TheDesign button enables you to switch the Document Window into Design View, which gives 
you an idea of how the page will end up. W hen in Design View, you can use the Visual Aids and 
Formatting M arks submenus from the main View menu to control visual markers like line breaks, 
borders, and spaces. Both submenus offer a menu item called Show that enables you to turn all 
the visual aids on or off at once. Turning both off is useful if you want to have an idea of how the 
page ends up in the browser. You should, however, use Design View only to get an idea of how the 
page will end up. Although VS has a great rendering engine that renders the page in Design View 
pretty well, you should always check your pages in different browsers as well, because what you 
see in VS is the markup for the page before it gets processed. Server controls on the page may emit 
HTML that changes the look of the page in the browser. Therefore, it's recommended to view the 
page in the browser as often as possible so you can check if it's going to look the way you want it. 
It's also recommended to test your site in as many different browsers as you can get your hands on, 
because there may be small differences between them in the way they render a web page. The Planet 
Wrox website has been developed and tested against recent versions of M icrosoft Internet Explorer, 
Firefox, GoogleChrome, Safari, and Opera. You'll see screenshots of these browsers at various 
places in the book. 

The Split button enables you to look at Design View and M arkup View at the same time, as you can 
see in Figure 2-10. 

Split View is great if you want to seethe code that VS generates when you add controls to the Design 
View of your page. The other way around is very useful too: When you make changes to the markup 
of the page in M arkup View, you can see how it ends up in Design View. Sometimes Design View 
becomes out of sync with M arkup View. If that's the case, a message appears at the top of Design 
View. Simply clicking the message or saving the entire page is enough to update the Design window. 
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Frontend. master -P X 


<3fi@ Master Language="VB" CodeFile="Frontend. master. vb" Inherits="MasterPages_Frontend" X> 
KiDOCTYPE htnl> 
|B<htinl xnilns=" http://www.w3.org/1999/xhtnil "> 
EXhead runat="server"> 
<title></title> 

<asp:ContentPlaceHolder ID="head" runat="server"> 
</asp:ContentPlaceHolder> 
</head> 

[00% ' 4 ^ ^ 

[bodfcl 


I 


s Design || m Split 


FIGURE 2-10 


You can cyclethrough the three different modes using the Ctri4f age Up and Ctri4f age Down i<eys. 

If you want your pages to open in a different view than M arl<up View, choose Tools o 0 ptions. 
Then expand HTM L Designer, and in the General category, set your preferred view. Alternatively, 
enter HTML Dea^ier General in theQ uicl< Launch text box (which you can access by pressing 
Ctrl+Q) at the top-right of VSand then clicl< the item in the list that appears. 

In addition to the H TM L and other markup you see in the M arl<up View window, a Web Form can 
also contain codein either C#or Visual Basic .N ET. Where this code is placed dependson thetype 
of Web Form you create. The next section explains the two optionsyou havein more detail. 


Choosing between Code Behind and Pages with Inline Code 

Web Forms come in two flavors: either as an .aspx file with a Code Behind file (a file named after 
theWeb Form with an additional .vb or .cs extension) or as .aspx files that have their code 
embedded, often referred to as Web Forms with inline code. Although you won't see much code 
until Chapter 5, it's important to understand the difference between these types of Web Forms. At 
first, Web Forms with inline code seem a little easier to understand. Because the code needed to 
program your website is part of the very same Web Form, you can clearly see how the code relates 
to the file. H owever, as your page gets larger and you add more functionality to it, it's often easier 
if you have the code in a separate file. That way, it's completely separate from themarl<up, enabling 
you to focus on thetasl< at hand. 

In the next exercise, you add two files that demonstrate the difference between CodeBehind and 
inline code. 


TRY IT OUT 


Adding Web Forms with Code to Your Site 


The files you add in this exercise aren't needed for the final application. To avoid cluttering up the proj- 
ect, you should put them in a separate Demos folder. 
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1. In the Solution Explorer, right-click your website and choose Add o N ew Folder. N ame the folder 
Demos and press Enter. 

2. Right-clicl< the Demos folder and choose Add o Add N ew Item. In the dialog box that appears, 
choose your preferred programming language on the left, clicl< the Web Form template, and name 
the file codeBehind.aspx. M akesurethat the check box for PlaceCodein Separate File is selected. 
Finally, click theAdd button. The page should open in M arkup View so you can seethe HTM L for 
the page. 

3. At the bottom of the Document Window, click the Design button to switch the page from M arkup 
View into Design View. The page you see has a white background with a small, dashed rectangle at 
the top of it. The dashed rectangle represents the <div> element you saw in M arkup View. 

4. From the Toolbox, drag a Label control from the Standard category and drop it in the dashed area 
of the page. Remember, you can open theToolbox with the shortcut Ctrl+Alt+X if it isn't open yet. 
In Design View, your screen should now look like Figure 2-11. 
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5. Double-click somewhere in the white area below the dashed line of the <div> element. VS switches 
from Design View into the Code Behind of thefileand adds code that fires when the page loads in 
the browser: 

VB.NET 

Protected Sub Page_Load (sender As Object, e As EventArgs) Handles Me. Load 

End Sub 
C# 

protected void Page_Load (object sender, EventArgs e) 
{ 

} 

Although this odd syntax may look a little scary at this point, don't worry about it too much now. 
In most cases, VS adds it for you automatically, as you just saw. In later chapters, you see exactly 
how this code works, but for now it's important to realize that the code you're going to place 
between the lines that start with protected sub and End sub in Visual Basic and between the 
curly braces in C#will be run when the page is requested in the browser. 

All code examples you see from now on includea Visual Basic (VB.N ET) and a C#version, so 
always pick the one that matches your programming language. 
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6. Place your cursor in the open line in the code that VS created and add the bolded line of code that 
assigns today's date and time to the label, which will eventually show up in the browser: 

VB.NET 

Protected Sub Page_Load{ sender As Object, e As EventArgs) Handles Me. Load 

Labell.Text = "Hello World; the time is now " & DateTime.Now.ToStringO 

End Sub 

C# 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

Labell.Text = "Hello World; the time is now " + DateTime.Now.ToStringO ; 

} 

N otethat as soon as you type the l for Labeii, you get a list with options to choose from. This is 
part of Visual Studio's Intel 11 Sense, a great tool that helps you rapidly write code. Instead of typ- 
ing the whole word Labeii, you simply type the letter l or the letters La and then you picl< the 
appropriate item from the list, visible in Figure 2-12. 
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To complete the selected word, you can press Enter or Tab or even the period. In the latter case, 
you immediately get another list that enables you to picl< the word Text simply by typing the 
first few letters, completing the word by pressing theTab or Enter l<ey. This feature is a real pro- 
ductivity tool because you can write code with a minimum of l<eystrokes. I ntelliSense is avail- 
able in many other file types as well, including ASPX , H TM L, CSS, JavaScript, and X M L. In 
many cases, the list with options pops up automatically if you begin typing. If it doesn't, press 
Ctrl-f-Spacebar to invol<e it. If the list covers some of your code in the code window, press and hold 
the Ctrl l<ey to make the window transparent. 

7. Right-click the codeBehind.aspx page in the Solution Explorer and choose View in Browser 
(Internet Explorer). Depending on the default browser you've configured for your computer, the 
browser name in the parentheses may be different. I'll simply refer to this menu item as View in 
Browser from now on. 

8. Click Yes if you get a dialog box that asks if you want to save the changes, and then the page will 
appear in the browser, similar to the browser window you see in Figure 2-13. 
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If you don't seethe message with the date and time appear or you get an error on the page in 
the browser, mal<e sure you saved the changes to all open pages. To save all pages at once, press 
Ctrl+Shift+S or click theSaveAII button on the toolbar (theonewith the multiplefloppy disl< 
symbols). Additionally, mal<esureyou typed thecodefor the right language. When you created 
this new page, you chose a programming language that applies to the entire page. You can't mix 
languages on a singlepage, so if you started with a Visual C#page, makesureyou entered theC# 
code snippet in step 6. 

9. Setting up a page with inline code is very similar. Start by adding a new Web Form to the Demos 
folder. Call it codemii ne . aspx and make sure you uncheck the Place Code in Separate File 
option. 

10. J ust as you did in steps 3, 4, and 5, switch the page into Design View, drag a label inside the <div> 
element, and double-click the page somewhere outside the <div> that now contains the label. 
Instead of opening a Code Behind file, VS now switches your page into M arkup View and adds the 
page_Load code directly in the page. 

11. On the empty line in the code block that VS inserted, type the bolded line you see in step 6 of this 
exercise. M ake sure you use the correct programming language. Y ou should end up with the fol- 
lowing code at the top of your .aspx file: 

VB.NET 

<script runat= " server" > 

Protected Sub Page_Load{ sender As Object, e As EventArgs) 

Labell.Text = "Hello World; the time is now " & DateTime.Now.ToStringO 

End Sub 
</script> 

C# 

<script runat= " server" > 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

Labell.Text = "Hello World; the time is now " + DateTime.Now.ToStringO; 

} 

</script> 

12. Right-click the page in the Solution Explorer and choose View in Browser. Alternatively, press 
Ctrl-ff 5 to open the page in your browser. You should see a page similar to the one you got in step 7. 

How It Works 

At run time, pages with inline code behave the same as pages that use Code Behind. In both cases, the 
ASP.N ET run time sees the page_Load code and executes any code it finds in it. In the Try It Out, this 
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meant setting the Text of Labeii to a welcome message and today's date and time. Tlie biggest dif- 
ference between tlie two options is wiieretiie code is stored. Witii pages witli iniinecode, aii code and 
mari<up is stored in tlie same file on disl<. W hen using Code Behind, the VB or C# code you write is 
stored in a separate file named after theWeb Form. 

Because pages with CodeBehind areeasierto manage, I'll use them exclusively for the Planet Wrox 
website. 

In thisexample, the C# code looks very similar to theVB.N ET code. Thecodethat sets the Label's 
text is almost identical in the two languages. 0 ne difference is that VB.N ET uses an ampersand (&) 
to glue two pieces of text together, but C # uses the plus (+) character. You can also use the plus char- 
acter in VB.N ET to concatenate strings together, but with a few caveats, as you'll learn in Chapter 
5. The other difference is that in C# code lines must be terminated with a semicolon (,-) to indicate 
the end of a unit of code, but Visual Basic uses the line breal<. If you want to split a long line of code 
over multiple lines in Visual Basic, you can use the underscore ( _) character. In earlier versions, 
VB.N ET required the underscore in a lot of different places. H owever, in recent versions of Visual 
Basic, the designers of the language have greatly reduced the number of places where you must use an 
underscore. 

0 ne place where you do need the underscore if you want to split code over multiple lines is right before 
the Handles l<eyword that you saw earlier: 

Protected Sub Page_Load {sender As Object, e As EventArgs) _ 
Handles Me . Load 

Labell.Text = "Hello World; the time is now " & DateTime .Now. ToString ( ) 
End Sub 

N ote that in your pages you don't have to use the underscore to breal< a long line. H owever, I'll add it 
to some of the examples in this bool< because the book's pages are not wide enough to show the entire 
code statement on a single line. You'll see more of these underscores in other Visual Basic examples in 
the remainder of this book. If you decide to manually type the underscore to make your own code more 
readable, don't forget to type a space before the underscore or your code won't work. 

In C#, you don't need this character because the language itself allows you to break long lines simply by 
pressing Enter. ThisisbecauseC#usesa semicolon to denote the end of a lineinstead of a line break in 
the source. 

You opened the page in your browser using the right-click View in Browser option or by pressing 
Ctrl4f 5. With the View in Browser option, you always open the page you right-click. With the Ctrl 4f 5 
shortcut, you open the page that is currently the active document in the Document Window, the page 
that is currently selected in the Solution Explorer, or the file that has been set as the Start Page for the 
website. Additionally, all open files aresaved automatically, and the site is checked for errors before the 
requested page is opened in the browser. 

You can assign a page as the Start Page by right-clicking it in the Solution Explorer and choosing Set As 
Start Page. If you want to control this behavior at a later stage, right-click the website in the Solution 
Explorer and choose Property Pages. In the Start Options category, you can indicate that you want the 
currently active page to open, or you can assign a specific page, as shown in Figure 2-14. 
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In the previous exercise, you learned liow to add a pagetliat contains a simple Label control. 
Additionally, you saw how to write some code that updates the label with today's date and time. 
You can ignore this code for now; it only served to demonstrate the differences between Code 
Behind and inline code. In Chapter 5, you learn more about programming in Visual Basic and C#. 

To mal<e compelling pages, you obviously need a lot more content than just a simple Label control 
that shows today's date and time. The next section shows you how to add content and H TM L to 
your pages and how to style and format it. 

Adding Markup to Your Page 

You have a number of ways to add HTML and other markup to your pages. First of all, you can 
simply type it in the M arkup View window. H owever, this isn't always the best option, because it 
forces you to type a lot of code by hand. To make it easier to insert new H TM L in the page and to 
apply formatting to it, the Design View window offers a number of helpful tools. These tools include 
the Formatting toolbar and the menu items Format and Table. For these tools to be active, you need 
to have the document in Design View. If you're working in Split View mode, you have to make sure 
that the Design View part has the focus, or you'll find that most of the tools are not available. 

inserting and Formatting Text 

You can type text in both Design View and in M arkup View. Simply place the cursor at the desired 
location and start typing. W hen you switch to Design View, the Formatting toolbar becomes avail- 
able, with the options shown in Figure2-15. 
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M any of the buttons on the toolbar function exactly the same as in other editing environments. For 
example, the B button formats your text with a bold font. Similarly, the I and the U buttons itali- 
cize and underlineyour text, respectively. Thedrop-down list labeled Block Format enables you to 
insert HTML elements lil<e <p> for paragraphs, <hi> through <h6> for headings, and <ui>, <oi>, 
and <ii> for lists. You can choose an item from the drop-down list directly to have it inserted in 
your page, or you can select some text first and choose the appropriate block element from the list to 
wrap the selected text inside the tags. 

In the next Try It Out, you see how to work with these tools to create the homepage of the Planet 
Wrox website. 

^^^^^^Q Adding Formatted Text 

In this Try It 0 ut, you create a Web Form called Default .aspx and add some basic content to it. 

1. Add a new Web Form with the Add N ew Item dialog box to the root of the site and call it 
Default .aspx. M ake sureyou check off the Place Code in Separate File option and click Add. 
Switch to Design View using the Design button at the bottom of the Document Window. 

2. Click inside the dashed rectangle until you seethe glyph showing that the <div> element is cur- 
rently active. At the same time, the tag navigator at the bottom of the code window should high- 
light the last block with the text <div> on it, as shown in Figure 2-16. 
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3. Type Hi there visitor and welcome to Planet Wrox and highlight the text USing the mOUSe. 

From the Block Format drop-down list (visible in Figure 2-15) choose H eading 1 <til>. N otethat a 
small glyph with the text hi appears right above the text, to indicate that VS created a heading for 
you automatically. Figure 2-17 shows the Design View with the <hi> element. 
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4. Position your cursor at tlie end of tlie lieading after tlie word wrox and press Enter. A new para- 
grapli (indicated by a smaii glypli witli tlie ietter p on it) is inserted for you so you can directly start 
typing. 

5. Type tile text siiown in Figure 2-18 (or mal<e up your own) to welcome tlie visitor to Planet Wrox. 
N otice how the text www.pianetwrox.com tums blue as soon as you type the comma to indi- 
cate VS has recognized it as a web address and has turned it into a linl<. You can press Enter to 
start a new paragraph. Select the text "paying a visit," clicl< the Foreground Color button on the 
Formatting toolbar, and select a different color in the dialog box that appears. Then select some 
other text, such as " reviews and concert pictures," and clicl< the Bold button. W hen you're done, 
your Design View should show something similar to Figure 2-18. 
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The code for the homepage should now lool< more or less similar to the following (the code 
has been reformatted a bit to fit the space in the bool<): 

<div> 

<hl>Hi there visitor and welcome to Planet Wrox</hl> 
<P> 

We&#39;re glad youSc#39;re 

<span class="auto-stylel">paying a visit</span> to 

<a href ="http : //www. Plane tWrox. com" >www. PlanetWrox. com</a> , 

the coolest music community site on the Internet. 

</p> 
<p> 

Feel free to have a look around; there are lots of interesting 

<strong>reviews and concert pictures</strong> to be found here. 

</p> 
</div> 
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At the top of the file you should also see a <styie> element, which is discussed next. 

6. 0 pen the page in your browser by pressing Ctrl4f 5, or by right-clicl<ing the page in the Solution 
Explorer and choosing View in Browser. 

How It Works 

W hen you use the various Formatting toolbar buttons, lil<e Foreground Color, VS inserts the appro- 
priate HTML and CSS codefor you. For example, when you clicl< the B button, VS inserts a pair of 
<strong> tags around the selected text. W hen you clicl< the I button, VS adds a pair of <em> tags to 
italicize the text. In this exercise, VSalso inserted a class attribute (shown in the previous code exam- 
ple) that points to a class called auto-styiei when you changed the text color. The codefor this style 
has been added to the top of your file and looks similar to this: 

<style type="text/css"> 
. auto-stylel 
{ 

color: #FF0OOO; 

} 

</ style> 

Your code may look slightly different if you chose a different color. The code you see here is 
explained in the next chapter. For now, just remember that this code sets the color of the text it is 
applied to as red. If the opening curly bracket is on the same line as the class, choose Tools <> 0 ptions 
o Text Editor o CSS o Formatting and set the Formatting Style to Expanded. This is just a matter of 
preference and doesn't change the effect of the code. 

N otethat VS replaced the apostrophe character (') in "we're" in the welcome message with its H TM L- 
compatible variant: &#39;. Using this kind of code enables you to insert charactersin your page that 
a browser may have trouble displaying, or that have special meaning within H TM L itself, like the 
ampersand character (&), which is written as &amp;. When you type text in Design View, VSautomati- 
cally inserts the coded equivalents of relevant characters for you; however, if you type in M arkup View 
directly, you'll have to do this yourself. 

Don't worry if your code looks different from what is shown here. M any settings in VS influence the 
code that is generated for you. 


So far, the exercises have been concerned with adding and styling text in your page. H owever, VS 
enables you to insert other HTML elements as well, like tables and bullets. The next section shows 
you how this works. 

Adding Tables and Other Markup 

HTML tables are great if you need to present structured or repeating data, like a list of products in 
a shopping cart, photos in a photo album, or input controls in a form. There is a lot of debate on 
the Internet about whether you should use tables to lay out your page as well. For example, if your 
page contains a header with a logo, a main content area, and a footer at the bottom, you could use a 
tablewith three rowsto accomplish this. In general, it's considered bad practice to use tables for this 
purpose because they add a lot of extraneous markup to the page and are often difficult to main- 
tain. Besides, quite often the same result can be accomplished using CSS, which you learn about in 
the next chapter. Despite the disadvantages that tables may bring, they are still an invaluable asset in 
your HTML toolbox when it comes to displaying tabular or otherwise structured information. 
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TRY IT OUT 


Using the Format and Table Menus 


In this exercise, you learn how to add tables to your page using theTable menu and how to add rows 
and columns. Additionally, you learn how to add other structured elements, such as bulleted lists. 

1. In the Demos folder, createa new Web Form called TabieDemo.aspx. M akesureit usesCode 
Behind by checl<ing the Place Code in Separate File option. 

2. Switch the page to Design View, clicl< inside the dashed rectangle that represents the standard 
<div> tag in the page, and chooseTableo insertTable. The Insert Table dialog box appears, as 
shown in Figure 2-19. 
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3. Set Rows to 3 and leave Columns set to 2. Leave all other settings at their defaults and clicl< OK. 
The table gets inserted in the page. 

4. If you see only a single table cell, and not theentire table with three rows and two columns, you 
need to enable Visual Aid for tables. To do this, choose View o Visual Aids o Visible Borders 
from the main menu to turn the borders on. Your Design View should now lool< lil<e Figure 2-20. 
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5. Drag the right border of the very first ceii in the tabie to the ieft. You'ii see a visuai indicator 
showing the width of the cell. Keep dragging it to the left until it has a width of 200 pixels, as in 
Figure 2-21. 
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6. To add more rows or columns to the table, you can right-clicl< an existing cell. From the pop- 
up menu that appears, choose Insert to add additional rows or columns at different locations. 
Similarly, you can use the Delete, M odify, and Select options to delete rows or columns, merge 
cells, and mal<e selections. For this exercise, you don't need to add additional rows or columns, 
although it's ol<ay if you have already done so. 

7. Place your cursor in the first cell of the first row and type the words Buiieted List. 

8. Place your cursor in the second cell using the mouse. Alternatively, you can pressTab to move the 
cursor to the next cell. From the Format menu, choose Bullets and N umbering. 

9. Switch to the Plain Bullets tab, clicl< the picture with the round, solid bullets (see Figure 2-22), and 
click OK. 
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10. Type some text, lil<e your favorite musical genre(Punl<, Rock, Techno, and so on), and pressEnter. 
VS inserts a new bullet for you automatically, so you can continue to add new items to the list. 
Add two more genres, so you end up with three bullets. 
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11. Repeat steps 7 through 10, but now create a numbered list. First, type Numbered List in the first 
ceii of the second row, then position your cursor in the second ceii of the same row, and choose 
Format o Buiiets and N umbering. Switch to the N umbers tab (visibie in Figure 2-22 behind the 
Plain Bullets tab) and clicl< the second picture in the first row, which shows a standard numbered 
list, and clicl< OK. Type a few items for the list, pressing Enter after each item. 

12. Open the page in the browser by pressing Ctrl4f 5. You should see a screen similar to Figure 2-23. 



FIGURE 2-23 


How It Works 

W hen you visually insert page elements like tables or lists through the available menus, VS inserts the 
required markup for you in M arkup View. W hen you insert a table, VS adds a <tabie> element and a 
number of <tr> and <td> elements to define rows and cells, respectively. It also applies a class attri- 
bute pointing to a CSS style that defines the table's width. It created another style for the <td> elements 
when you dragged the column width to be 200 pixels. Similarly, when you insert a list, VS inserts an 
<oi> element for numbered or ordered lists and a <ui> element for bulleted or unordered lists. Within 
these elements, <ii> elements are used to define each item in the list. 


Besides the HTML tags you have seen thus far, there is another important tag you need to look at: 
the <a> tag, which is used to create links between pages. 

Connecting Pages 

An important part of any website is the links that connect the pages in your site. Links enable your 
visitors to go from one page to another, in the same site or to a completely different site on the 
Internet. You have a few ways to create links between pages, including; 

>• The HTM L <a> element, explained in this chapter. 

>■ Using the <asp:HyperLink> control, discussed in Chapter 7. 

>■ Programmatically through code. This is discussed later in the book. 

The following exercise shows you how easy it is to link from one page to another. 
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TRY IT OUT 


Linking Pages 


In this Try It 0 ut, you modify tlie TabieDemo . aspx page you created earlier by adding text that linl<s 
to another page. 0 nee you run the page in the browser and clicl< that linl<, the new page replaces the 
old one. 

1. 0 pen the TabieDemo . aspx page from the Demos folder. 

2. If necessary, switch to Design View. 

3. In the first cell of the third row, type the text Link. 

4. In the second cell of the same row, type the text Go to the homepage of pianet wroxand 
highlight it with your mouse. 

5. On the Formatting toolbar, clicl< the Convert to H yperLinl< button. It's located near the end of the 
toolbar and has a linl< icon and a small arrow on it. 

6. In the dialog box that appears, clicl< the Browse button, browse to the Default, aspx pagein 
the root of your site, and clicl< OK. Next, clicl< OK again to close the H yperlinl< dialog box. The 
Design View of your page should lool< similar to the one displayed in Figure 2-24. 
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7. Switch to M arkup View and notice how the HTM L for the linl< has been inserted: 

<a href =".. /Default . aspx" >Go to the homepage of Planet Wrox</a> 

N ote that the href attribute points to the page you want to linl< to. 

8. If you want to change the page being linl<ed to from M arkup View, click somewhere between the 
opening and closing quotes of the href attribute and press Ctrl -f-Spacebar. A dialog box pops up 
that enables you to select another page within your site. Alternatively, you can click the Pick URL 
option and browse for the new page somewhere in your site. 

9. Right-click the TabieDemo. aspx pagein the Solution Explorer and chooseView in Browser. When 
the page has finished loading, click the Go to the homepage of Planet Wrox link. The request is 
sent to the web server and, as a response, you now get the homepage of the website. 


62 I CHAPTER 2 BUILDING AN ASP.NET WEBSITE 


How It Works 

Links between pages are likely one of the most important elements in a web page, because they enable 
you to create a connection between a page in your site and another page, whether that page lives in 
your own site or on a completely different server somewhere on the Internet. For simple links that 
should appear somewhere in your page, the H TM L <a> tag with an href attribute set is the easiest to 
set up. W hen the user clicks such a link, the browser requests the new page from the server and displays 
it. The double dots (. .) in the href 's value are a way to refer to the parent directory. The full href 
attribute means "go up one level in the folder hierarchy and then select the file Default .aspx." You see 
a lot more about links and how they work in Chapter 7. 

You're not limited to linking to pages in your own site. If you want to link to external pages instead, 
simply replace the href attribute value with thefull address of the page, as shown in the following 
example: 

<a href ="http : //www. wrox. com" >Go to the Wrox homepage</a> 

For external links, it's important to includethehttp:// prefix; otherwise, the browser goes out look- 
ing for a file or folder called www.wrox.com on your own website. 


You'll use the things you learned in thischapter about page creation and formatting in the next 
chapter, which deals with designing your web pages using CSS. 

Besides the visual tools, likethe Formatting toolbar and the Table menu. Visual Studio has another 
great way to quickly insert code in your pages: code snippets. Code snippets enable you to insert 
large chunks of code with just a few keystrokes. You see code snippets at work in the next chapter. 


PRACTICAL TIPS ON WORKING WITH WEB FORMS 

H ere are some tips for working with Web Forms: 

>• Favor Web Forms with Code Behind over those with inline code. Although at first you may 
not notice a big difference in working with them, as your site and pages start to grow, you'll 
find that it's easier to work with a page where the code is separated from the markup. 

>■ Spend some time familiarizing yourself with the different menu items of the Format and 
Table menus. Most of them generate HTM L elements that are inserted into your page. Take 
a look at the H TM L elements and attributes that have been generated for you, and try to 
change them directly in the code, and through the menus and toolbars. This way, you get a 
good feel for the various tags available and how they behave. 

>• Experiment with links to connect pages in your site. N otice how VS creates different links 
depending on the location of the page you are linking to. Chapter 7 deals with linking and 
the various ways to address pages in your site in much more detail. 
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SUMMARY 

This chapter introduced you to some important topics that heip you buiid maintainabieand struc- 
tured ASP.N ET websites. Understanding the differences between the various project types and tem- 
piatesenabiesyou to i<ici<-start a web project with just the fiies you need. 

The same applies to the different fiie types you can add to your site. Because each fiietype serves a 
specific purpose, it's important to reaiize what that purpose is and how you can use the fiie. 

One common activity thatyou'ii perform when buiiding ASP.N ET web pages is adding mari<up 
to the page. As you saw in this and the previous chapter, mari<up comes in a few flavors, including 
piain H TM L and ASP.N ET Server Controls. Knowing how to add this marl<up to your page using 
the numerous menu options and toolbars that VS offers is critical in building good-lool<ing web 
pages. 

N ow that you have a solid understanding of creating and modifying Web Forms, it's time to look at 
how you can turn those dull blacl<-and-white pages with a few controls into attractive web pages. 
The next chapter shows you how to worl< with the many CSS tools found in VS to create the desired 
effect. 


EXERCISES 


1. Name three important files in the Web Files category that you can add to your site. Describe the 
purpose of each file. 


2. What do you need to do to make a piece of text both bold and italicized in your web page? What 
will the resulting HTML look like? 


3. Name three different ways to add existing files to an ASP.NET website in VS. 

4. What are the different views that VS offers you for your ASPX pages? Does VS offer other views 
as well? 


You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 


Code Behind 

A page model where server-side code Is stored In a separate code file 

Design View 

Gives you a graphical representation of your page 

File Types 

ASP.NET supports many different file types, including Web Forms { . aspx), 


master pages ( . master), CSS files ( . ess), JavaScript { . j s), and SQL Server 


databases (.mdf) 

Inline Code 

A page model where server-side code Is stored in the same file as the markup 

Markup View 

Enables you to look at the markup of your page 

Project Templates 

Jump-start your web development by setting up a site targeting a specific 


scenario 

Project Types 

Visual Studio offers two project types: Web Application Projects and Web Site 


Projects 

Split View 

Enables you to look at Markup View and Design View at the same time 

Web Form 

Presents the user interface of your website at the client 



Designing Your Web Pages 


WHAT YOU WILL LEARN IN THIS CHAPTER: 


>• What CSS is and why you need it 
>• How CSS lool<s and how to write it 

>" The different ways to add CSS code to your ASP.NET pages and to 
external files 

>• The numerous tools that VS offers you to quicl<ly write CSS 
WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Codetab at 
www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the Chapter 3 download. 

The pages you created in the previous two chapters look pretty plain and dull. That's because 
they lack styling information and therefore default to the standard layout that the browser 
applies. To spruce up your pages, you need a way to change their presentation in the browser. 
The most common way to do this is by using the cascading style sheets (CSS) language. CSS is 
the de facto language for formatting and designing information on the web, including 
ASP.N ET web pages. With CSS you can quickly change the appearance of your web pages, 
giving them that great look that your design or corporate identity dictates. 

Solid support for working with CSS was initially added in Visual Web Developer (VW D) 
2008, one of the predecessors of VS Express 2012 for Web. This support has been further 
enhanced in the previous version of Visual Studio, VWD 2010. The new VS2012 buildson 
top of this CSS support and improves it in a number of ways, making the CSS editor a first- 
class citizen in VS, with editor features similar to other languages such as C#and V B. The 
CSS tools enable you to create your CSS code visually, making it much easier to style your 
pages without the need to know or remember every little detail of CSS. 
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To understand the relevance of and need for CSS in your ASP.N ET websites, you need to understand 
tiiesiiortcomings of H TM L first. Tlie next section iooi<s at tiie problems tliat piain HTML presents, 
and liow C SS is abie to overcome tiiese issues. 


WHY DO YOU NEED CSS? 

in tiie early days of the Internet, web pages consisted mostly of text and images. The text was for- 
matted using plain H TM L, using tags like <b> to mal<e the text bold, and the <font> tag to influ- 
ence the font family, size, and color. Web developers soon realized that they needed more power to 
format their pages, so CSS was created to address some of HTM L's styling shortcomings. 

Problems of HTML Formatting 

One of the problems with using H TM L for formatting is that it offers only a limited set of options 
to styleyour pages. You can use elements 11 l<e <i>, <b>, and <font> to change the appearance of 
text and use attributes I il<e bgcolor to change the background color of H TM L elements. You also 
have a number of other attributes at your disposal for changing the way links appear in your page. 

0 bviously, this feature set isn't rich enough to create the attractive web pages that your users expect 
and demand. 

Another problem of H TM L with a lot more impact on how you build your web pages is the way the 
styling information is applied to the page. By design, HTML forces you to embed your formatting in 
your HTML document, making it harder to reuse or change the design later. Consider the following 
example: 

<p><font face="Arial" color="red" size="+l"> 

This is red text in an Arial type face and slightly larger than the default text. 
</f ont></p> 

The problem with this code snippet is that the actual data (the text in the <p> element) is mixed 
with the presentation (the formatting of the text with the <font> tag in this example). Ideally, the 
two should be separated, so each of them is easier to change without affecting the other. 

Imagine you used the <p> and <font> elements to mark up the first paragraph of every page in your 
site. W hat happens when you decide to change the color of the font from red to dark blue? 0 r what 
if your corporate identity dictates a Verdana font instead of Arial? You would need to visit each and 
every page in your site, making the required changes. 

Besides maintainability, another problem with HTML formatting isthefact that you can't eas- 
ily change the formatting at run time in the user's browser. With the H TM L from the previous 
codesnippet, there is no way to let your visitor change things likethe font sizeor color, a common 
request to help people who are visually impaired. If you want to offer your visitors an alternative 
version of the page with a larger font size or a different color, you'd need to create a copy of the 
original page and make the necessary changes. 

The final problem with HTML formatting is that the additional markup in your page adds consider- 
ably to the size of the page. This makes it slower to download and display because the information 
needs to be downloaded with each page in your website. It also makes it harder to maintain your 
pages because you'd need to scroll through large HTML files to find the content you need. 
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To summarize, formatting with HTML suffers from tlie following problems: 

>" Its feature set severely limits the formatting possibilities that your pages require. 
>- Data and presentation are mixed within the same file. 

>• HTML doesn't enable you to easily switch formatting at run time in the browser. 

>" The required formatting tags and attributes make your pages larger and thus slower to load, 
display, and maintain. 

Fortunately, CSS enables you to overcome all of these problems. 

How CSS Fixes Formatting Problems 

CSS is designed to format your web pages in almost every possible way. It offers a rich set of options 
to change every little aspect of your web page, including fonts (size, color, family, and so on), colors 
and bacl<ground colors, borders around HTML elements, positioning of elements in your page, and 
much more. CSS is widely understood by all major browsers today, so it's the language for visual 
presentation of web pages and very popular among web developers. 

CSS overcomes the problem of mixed data and presentation by enabling you to define all format- 
ting information in external files. Your ASPX or HTM L pages can then reference these files and the 
browser will apply the correct styles for you. With this separation, the H TM L document contains 
what you want to display, and the CSS file defines how you want to display it, enabling you to change 
or replace one of the two documents, leaving the other unmodified. In addition, you can placeCSS 
directly in an H TM L or ASPX page, which gives you a chance to add small snippets of CSS exactly 
where you need them. You should be cautious when placing CSS directly in an H TM L or ASPX 
page, because you can then no longer control style information from a single, central location. 

Because you can place all CSS code in a separate file, it's easy to offer the user a choice between dif- 
ferent styles— for example, one with a larger font size. You can create a copy of the external style 
sheet, mal<e the necessary changes, and then offer this alternative style sheet to the user. You see 
how this worl<s in Chapter 6 when ASP.N ET Themes are discussed. 

Another benefit of a separate style sheet file is the decrease in bandwidth that is required for your 
site. Style sheets don't change with each request, so a browser saves a local copy of the style sheet 
the first time it downloads it. From then on, it uses this cached copy instead of requesting it from the 
server over and over again. Sometimes this caching can worl< against you when the browser doesn't 
download the latest CSS files with your changes. If you find that the browser is not picl<ing up the 
changes you madeto a CSS file, useCtrl-ff5 or Ctl-ffl in the browser (not in VS) to get a fresh copy 
from the server. 

N ow that you have seen why CSS is so important, it's time to find out how it looks and how to 
use it. 

AN INTRODUCTION TO CSS 

in terms of syntax, CSS is an easy language to learn. Its "grammar" consists of only a few concepts. 
That makes it relatively easy to get started with. W hat makes CSS a bit more difficult is the way all 
major browsers render a page. Although virtually every modern desktop browser understands CSS, 
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they all have their quirks when It comes to displaying a page according to the CSS standard. This 
standard, maintained by the same organization that maintains the H TM L standard, the World 
Wide Web Consortium, or W3C for short, comes In three different versions: 1.0, 2.1, and 3.0. From 
these three versions, 2.1 Is the most applicable today. It contains everything that version 1.0 contains 
but also adds a lot of possibilities on top of that. It's also the version that VS uses and generates by 
default. Version 3.0 Is currently under development and It's expected to take sometime before the 
major browsers have solid support for It. 

Before you look at the actual syntax of CSS, It's a good Idea to see an example first. In the following 
exercise, you write a simple A SPX page that contains some CSS to format the contents of the page. 
This helps In understanding the CSS language, which Is discussed In full detail In the section that 
follows. 


TRY IT OUT 


Writing Your First CSS 


In this Try It Out you write some CSS that changes the appearance of a header and two paragraphs. 
You'll hand code the page for now; the second half of this chapter shows you how to use the CSS tools 
available In VS. 

1. In the Demos folder of the Planet Wrox project, createa new Web Form called cssDemo.aspx. For 
this exercise. It doesn't matter If you choose Inline code or Code Behind. 

2. M ake sure the page Is In M arkup View and then locate the closing </titie> tag In the source. 
Position your cursor at the end of the line and press Enter to create an empty line between the 
<titie> and <head> tags. On this new line type the word style and then press Tab. VS completes 
the <styie> element for you. Press Enter twice to create some room between the tags and then 
complete the block as follows: 

<title></title> 

<style type="text/css"> 

</style> 

</head> 


NOTE This code completion feature uses code snippets that enabie you to 
associate a piece of code (lil<e the <styie> element) with an identifier (like 
style in this example). Code snippets are very useful for inserting pieces of 
code quickly by typing only the short identifier Many more code snippets are 
available, and where appropriate I'll point them out throughout this book. 


Instead of using the style code snippet, you can also type the full code yourself. N ote that as soon 
as you type the opening angle bracket (<), a list pops up that enables you to select the <styie> 
tag. The same applies to the type attribute; simply type the letters ty and the type attributeis 
preselected in the list. All you need to do to complete the word is press the Tab or Enter key. And, 
once more, the same help is available for the attribute value text/css. Simply select it in the list 
and press Tab or Enter, and the value is inserted for you automatically, nicely surrounded by the 
double quotes. 
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3. N ext, between theopening and closing <styie> tags, type the following bolded CSS code: 

<style type="text/css"> 
hi 

font- size: 20px; 
color: Green; 


color: Blue; 
font-style: italic; 


4. 


.RightAllgned 

text-align: right; 

</ style> 

Take great care when typing this code, because CSS is rather picl<y about syntax. The first item in 
the list is an hi tag to style a heading at the first level, so it gets a size of 20 pixels and is displayed 
in a green font. N otice the colon between font-size and 20px and that the line is closed with a 
semicolon. 

The second item in the list simply contains the letter p and defines the look and feel for all <p> 
elements in the page. 

The last item is prefixed with a period (.) followed by the text RightAiigned. This item is used to 
right-align some text in the page. Because CSS is case sensitive, it's important to type this exactly 
as shown here, with a capital R and A, or the CSS code won't line up with the H TM L shown in 
the next step. 


N ote that as soon as you type the hash symbol (#) 
after the color property, a color picker pops up to 
help you to select a color as shown in Figure 3-1. For 
now, just close the color picker by pressing Esc and 
manually complete the code. You see more of this 
color picker later in this chapter. 

Scroll down in the page a bit until you seethe opening 
lowing bolded code: 


<style type="text/css"> 


hi 


{ 


font-size: 20px; 


color: m 




FIGURE 3-1 


:div> tag. R ight after this tag, type the fol- 


<div> 

<hl>Welcome to this CSS Demo page</hl> 

<p>CSS makes it super easy to style your pages. </p> 

<p class= "RightAiigned" > 

With very little code, you can quickly change the looks of a page. 
</p> 
</div> 


Instead of typing in this code directly, you can also use the Formatting toolbar while in Design 
View to create elements like <hi> and <p>. For now, you need to switch to M arkup View to add 
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ciass="RightAiigned", but in later exercises in tilis cliapter you see liow you can liave tlie IDE 
write this code for you. 

5. If you switch to Design View (or Split View), you'll see that the designer shows your text with the 
formatting defined in the <styie> element of the page. Figure 3-2 shows the page in Split View so 
you can see the code and the design at the same time. 


CssDemo.aspx -B X 


E<body> 

B <fonn id="forfnl" runat='*server"> 
B <div> 

<hl>Welcome to this CSS Demo page</hl> 

<p>CSS makes it super easy to style your pages. </p> 
B <p cla55="RightAligned"> 

With very little code, you can quickly change the looks of a page. 
</p> 

</div> 

< /fQcn> , 


Welcome to this CSS Demo page 

a 


CSS makes ii super easy to sfyle your pages^ 


With very Mile code, you can quickly change the looks of a page. 


o Design | a Split | " Source 1 <html > | | <body> | [<form#fQrm"l>] | <div> j <p> 


0 


FIGURE 3-2 


Although this black-and-white bool< makes it difficult to see different font colors, in Figure 3-2 
you can see clearly that the <hi> has a larger font size. The figure also shows that all paragraphs 
are now displayed with an italic font. Finally, you can see that the last paragraph is aligned to the 
right of thewindow, because the class attribute on the tag issetto RightAiigned. 


COMMON MISTAKES If you don't see the last paragraph glued to the right bor- 
der of the Document Window make sure you typed RightAiigned exactly the 
same in the <style> fog and in the class attribute. Because CSS is case sensi- 
tive, there's a big difference between RightAiigned and rightaiigned. 


6. Press Ctrl-ff 5 to view cssDemo.aspx in your browser. The page you see in the browser is identical 
to the preview you got in the Design View of VS. 

How It Works 

Although the codeyou typed in this exercise is relatively simple, there's a lot going on under the hood 
of the browser (and the Design View of VS) to make this possible. You started by adding some styles to 
the <head> section of the page: 

<style type="text/css" > 
hi 
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font-size: 20px; 
color: Green; 


</ style> 


The <styie> tag is used to wrap a stylesheet that is embedded in the page with its type attribute set to 
text /ess. This text /ess value is currently the only applicable type for a <styie> blocl< and tells the 
browser to interpret the code that follows as CSS. 


The code block from hi until the closing curly brace(}) 
between the <styie> tags is called a rule set or simply a 
rule. The rule in this code snippet defines the appearance 
for all <hi> elements in your page. The hi at the top of the 
code block is called a selector and is used to indicate to what 
element the formatting should be applied. In thiscase, the 
selector maps directly to an H TM L element, but many other 
selectors are available, as you see in the next section. 
Figure 3-3 shows how the elements are related to each other. 


Selector 

n 


Declaration 


hi 


Rule Set < 


font-size: 20px; 
color: Green; 

uu 

Property Value 


} 


FIGURE 3-3 


Between the curly braces you seethe style information that 
should be applied to the heading. Each line between the curly 
braces is called a declaration. A declaration consists of a 
property, followed by a colon, and then followed by a value. The semicolon (,-) at the end of a declara- 
tion separates it from the next declaration and is required on all declarations except for the last one in 
the rule set. H owever, for consistency, it's a good idea to add it to all declarations, which is what I'll do 
in the remainder of this book. 

W hen the browser loads this page, it also reads in the styles you defined between the <styie> tags. 
Then, whenever it comes across an H TM L element that matches the selector, it applies the CSS rules to 
that element. So, forthe<hi> and <p> elements, their respective rules are applied. This causes the head- 
ing to turn green with a large font, while the paragraphs turn blue with an italic font. 

But why does the last paragraph turn blue and get right-aligned? In CSS, you can have rules coming 
from different sources. The last <p> element gets its style information from the standard p selector 
in the style definition. So, thep rule gives the paragraph a blue and italic font. H owever, it also has 
a class defined. This class, called RightAiigned, links to a Class selector .RightAiigned (note the 
leading period) in the stylesheet and causes the text to be aligned to the right of the window. You see 
more of Class and other selectors in the next section. In the end, the last <p> element gets its rules from 
two selectors at the same time. You can make up and assign your own class names (as shown with the 
RightAiigned class), giving you the flexibil ity to design your pages and elements exactly how you want 
them. 


The next section digs a lot deeper in the syntax of CSS, giving you a much more detailed view on 
selectors, properties, and values. 
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CSS — The Language 

As you saw in the previous Try It Out exercise, a cascading style sheet is actually a collection of 
rules. A rule is a combination of a selector and one or more declarations, which in turn can be 
brol<en down to a property and a value. You're probably getting a little dizzy from all the new terms 
that were introduced in the past few paragraphs, so in the next section, you see most of them again, 
with a detailed explanation and code examples that show you what they are used for and how 
they work. 

The Style Sheet 

The style sheet contains all the relevant style information that should be applied to page elements. In 
its simplest form, a style sheet looks 11 l<e this: 

hi 
{ 

color: Green; 

} 

A stylesheet can also contain more than one rule, as you saw in the previous exercise. At the 
same time, each rule can contain multiple declarations, enabling you to group them under a single 
selector: 

hi 
{ 

font-size: 20px; 
color: Green; 

} 

The code you just saw is functionally identical to this: 

hi 
{ 

font-size: 20px; 

} 

hi 

{ 

color: Green; 

} 

The condensed form, where the two declarations are grouped under the same selector, ismuch easier 
to read, understand, and maintain, so it's advisable to usethissyntax as much as possible. 

To be able to style an element on a page, a browser has to know three things: 

>■ W hat element of the page must be styled? 

>■ What part of that element must be styled? 

>• H ow do you want that part of the selected element to look? 

The answers to these questions are given by selectors, properties, and values. 
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Selectors 

As its name implies, a selector is used to select or point to one or more specific elements within your 
page. A number of different selectors are available, giving you fine control over what elements you 
want to style. The selector answers the first question: W hat element of the page must be styled? The 
next section shows you the four most important types of selectors. 

The Universal Selector 

The Universal selector, indicated by an asterisl< (*), applies to all elements in your page. You can use 
the Universal selector to set global settings 11 l<e a font family. The following rule set changes the font 
for all elements in your page to Arial; 

* 

{ 

font- family : Arial; 

} 

The Type Selector 

The Type selector enables you to point to an HTM L element of a specific type. With a Type selector, 
all HTML elements of that typewill be styled accordingly. 

hi 
{ 

color: Green; 

} 

This Type selector now applies to all <hi> elementsin your codeand gives them a green color. Type 
selectors are not case sensitive, so you can use both hi and hi to refer to the same heading. I prefer 
to useall lowercase for my Type selectors though, so that'swhat you'll seein thisbool<. 

The ID Selector 

ThelD selector isalways prefixed by a hash symbol (#) and enables you to refer to a singleelement 
in the page. W ithin an H TM L or ASPX page, you can give an element a unique ID using the id 
attribute. With the ID selector, you can change the behavior for that singleelement, lil<ethis: 

#IntroText 
{ 

font -style: italic; 

} 

Because you can reuse this ID across multiple pages in your site (it only has to be unique within a 
single page), you can use this rule to quicl<ly change the appearance of an element that you use once 
per page, but more than once in your site, for example, with the following HTML code: 

<p id="IntroText">I am italic because I have the right ID.</p> 

<p id="BodyText">I am NOT italic because I have a different ID.</p> 

In this example, the#introText selector changes the font of the first paragraph — which has the 
matching id attribute— but leaves the other paragraph unmodified. ID selectors are case sensitive, 
so make sure that the id attribute and the selector always use the same casing. 
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N otice that the selector uses a hash symbol (#) In Its name, but you don't use this symbol In the id 
attribute. 

The Class Selector 

The Class selector enables you to style multiple H TM L elements through the class attribute. This 
Is handy when you want to give the same type of formatting to a number of unrelated HTM L ele- 
ments. The following rule changes the text to red and bold for all H TM L elements that have their 

class attributes set to Highlight: 

.Highlight 
{ 

color: Red; 
font-weight: bold; 

} 

The following code snippet uses the Highlight class to make the contents of a <span> element and 
a link (<a>) appear with a bold typeface: 

This Is normal text but <span class="Hlghllght">thls Is Red and Bold.</span> 
This is also normal text but 

<a href="CssDemo. aspx" class="Hlghllght">thls link is Red and Bold as well.</a> 

N otIce that the selector uses a period In Its name, but you don't use this period when referring to the 
selector In the class attribute. The class attribute Is very useful because It enables you to reuse a 
piece of CSS for many different purposes, regardless of the H TM L element that uses the class. Class 
selectors are case-sensitive so make sure you type them correctly (or let Intel 1 1 Sense help you pick the 
classes from the list when possible). 

CSS supports more types of selectors, giving you even more control over the elements you want to 
target, but the four different types you just saw are the most widely used. 

Grouping and Combining Selectors 

CSS also enables you to group multiple selectors by separating them with a comma. This Is handy If 
you want to apply the same styles to different elements. The following rule turns all headings In the 
page to red : 

hi, h2, h3, h4, h5, h6 
{ 

color: Red; 

} 

M oreover, with CSS you can also combine selectors, enabling you to hierarchically point to a spe- 
cific element in a page. You can do this by separating the selectors with a space. Thefollowing 
example targets all <p> elements that fall within a <section> element with an id of Maincontent, 
leaving all other paragraphs unmodified. Also note there's no space between section and 
#Maincontent. This results in that part of the selector targeting a <section> element with an id of 

MalnContent. 

section#MainContent p 
{ 

font-size: 18px; 

} 
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N otethat combining is very different from grouping. Grouping isjust a sliortcut to avoid typing tfie 
samedeciarations over and over again, wliereas combining enabies you to target specific eiements in 
your document. 

Witli combining, you're not iimited to ID and Type seiectors; you can aiso use it witli tlieotlier 
seiectors, as is demonstrated witli tliefoiiowing exampie: 

section#MainContent p. Attention 
{ 

font-weight: bold; 

} 

TIlis ruieclianges aii paragraplis witli tlie d ass Attention witliin tlie <section> dement witli its id 
set to Maincontent and ieaves aii otiiers untouclied. Tliefoiiowing HTML snippet uses this rule to 
show the effect: 

oection id="MainContent"> 

<p class="Attention">My class is Attention, so my text is bold.</p> 

<p>My text is not bold, as it lacks the Attention class. </p> 
</section> 

<p class="Attention">I am NOT bold because I don't fall within MainContent .</p> 

The second question that needs to be answered to apply a certain style in your page is about what 
part of the dement must be styled. You do this with properties. 

Properties 

Properties are the part of the dement that you want to change with your style sheet. The CSS speci- 
fication defines a long list of properties (VS's IntdliSense list shows more than 100 items), although 
you won't use all of them in most websites. The following table lists some of the most common CSS 
properties and describes where they are used. 


PROPERTY 

DESCRIPTION 

EXAMPLE 

background- color 
background- image 

Specifies the background 
color or image of an element. 

background-color: White; 
background- image : url (Image . jpg) ; 

border 

Specifies the border of an 
element. 

border: 3px solid Black; 

color 

Changes the font color. 

color: Green; 

display 

Changes the way elements 
are displayed, enabling you 
to hide or show them. 

display: none; 

This causes the element to be hidden, and 
not take up any screen space. 

float 

Enables you to "float" an ele- 
ment in the page using a left 
or right float. Other content is 
then placed on the opposite 
side. 

float: left; 

This setting causes other content following 
a float to be placed at the top-right corner 
of the element. You see how this works 
later in the chapter. 


continues 
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(continued) 


PROPERTY 

DESCRIPTION ^IllliU^ 

EXAMPLE mm^^ 

font-family 
font-size 
font-style 
font-weight 

Changes the appearance of 
fonts used on your page. 

font -family: Arial; 
font -size: 18px; 
font-style: italic; 
font-weight: bold; 

height 
width 

Sets the height or width of 
elements in your page. 

height: lOOpx; 
width: 2 0 0px; 

margin 
padding 

Sets the amount of free 
space inside (padding) 
and outside (margin) of an 
element. 

padding : 0 ; 
margin: 2 0px; 

visibility 

Controls whether an ele- 
ment is visible in the page. 
Invisible elements still take 
up screen space; you just 
don't see them. 

visibility: hidden; 
This causes the element to be invisible. 
However, it still takes up its original space 
in the page. It's as if the element is still 
there, but completely transparent. 


Fortunately, VS helps you to find the right property with its many CSS tools, so you don't have to 
remember them all. 


NOTE Many more selectors and properties are available in CSS than I have 
described here. For more detail on CSS, consult VS's IntelliSense lists or take a 
look at www. w3 schools . com/cssref /. 


For a property to be useful, you need to give it a value, which answers the third question: H ow do 
you want the part of the selected element to lool<? 

Values 

Just as with properties, values come in many flavors. The values you have available depend on the 
property. For example, the color attribute tal<es values that represent a color. This can be a named 
color (such as White), a hexadecimal number representing a red, green, and blue (RGB) component 
(such as #FFOooo), or you can set it using the CSS rgb notation. Thefollowing examples are all 
functionally equivalent and set the color of the hi element to red: 

hi 
{ 

color: Red; 

} 


hi 
{ 
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color: #FFOOOO; 

} 

hi 
{ 

color: rgb(100%, 0%, 0%); 

} 

You can also specify the transparency of a color using the rgba notation where the fourth parameter 
is a decimal number between o (fully transparent) and i (no transparency) lil<ethis: 

color: rgba(255, 0, 0, 0.50); 

Using named colors can increase the readability of your CSS code, but because you're limited to a rela- 
tively short list of named colors, you often need the hexadecimal notation to get the exact color you 
want. Later in this chapter you see how to use the built-in color picker to create the exact color you need. 

M any other values are possible as well, including size units (px, em, and so on), font families, images 
(which taketheform of uri (someimage.jpg) ), or so-called enumerations like the border-styie, 
which enables you to set a border style such as solid, dashed, double. 

Using Shorthand 

M any of the CSS properties enable you to write a shorthand version as well as a more expanded ver- 
sion. Take, for example, the border property. In its shortest form, you can set the border property 
like this: 

border: Ipx solid Black; 

Thisborder property applies a border to all four sides of an H TM L element. The border size is ipx, 
the style is solid (some of the other options include dashed, dotted, and double), and the border 

color is set to Black. 

This is an easy way to quickly set all four borders of the H TM L to the same values. H owever, if 
you want more control over the individual borders and their properties, you can use the expanded 
version: 

border-top-width: Ipx; 
border-top-style: solid; 
border-top-color: Black; 
border-right-width: Ipx; 
border-right - style : solid; 
border-right-color: Black; 
border-bottom-width: Ipx; 
border-bottom-style: solid; 
border-bottom-color: Black; 
border-left-width: Ipx; 
border-left-style: solid; 
border-left-color: Black; 

This long version causes the exact same style to be applied: a solid black border on all four sides 
with a thickness of 1 pixel. In most cases, you should favor shorthand notation over its expanded 
counterpart, because it's much easier to read and maintain. However, if you need absolute control 
over the border — for example, if you want a 2-pixel dashed border on the left and top sides, and 
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a green, solid border on the right and bottom sides of the H TM L element — it's good to i<now that 
you can set each border property of aii four directions individually. You can also mix these options, 
The following example sets the border on all four sides to a 1-pixel solid black line, and then over- 
rides just the color of the left border: 

border: Ipx solid Black; 
border-left-color: Blue; 

Other CSS properties that support shorthand include font, background, list-styie, margin, and 
padding. If youYe unsu re Whether a property supports shorthand, consult the IntelliSense pop-up 
list that appears by pressing Ctrl-f-Space when you're entering a property in a CSS file or a <styie> 
blocl<. 

Although at times it seems you need to write CSS by trial and error, and just hope for the right 
result, there's actually a quite accurate model behind CSS that determines how items should be laid 
out on the page. This model is called the CSS Box M odel. 


The CSS Box Model 

TheCSSBox M odel describes the way three 
important CSS properties are applied to H TM L 
elements: padding, border, and margin. 
Figure 3-4 shows a graphical representation of 
the box model. 


Top 


Left 


Element 


Bottom 


FIGURE 3-4 


Right 


In the middle there is an HTM L element lil<ea 
<p> or a <div> with a certain height and width. 
Just around it there is padding; the whitespace 
that surrounds the element within its border. 
Immediately after the padding you can seethe 
border and finally on theoutside there is the 
margin, which defines the room between an ele- 
ment (including its padding and border) and its 
surrounding elements. The three outer properties 
of an element — padding, border, and margin — add up to the space that an element takes up in the 
page. To see how this works, consider the following CSS and HTML: 


Margin 


Border 


Padding 


{ 


. MyDiv 

width: 200px; 

padding: lOpx; 

border: 2px solid Black; 


<div c las s= "MyDiv" >Element</div> 

This renders a rectangle in the browser with the <div> element 
surrounded by a black border of two pixels, as shown in 
Figure 3-5. 


Element 


How wide is this arrow? 


FIGURE 3-5 
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Before you read on, try answering the question: H ow wide is tlie arrow beiow tlie <div> dement? 

If you guessed 224 pixeis, you are correct. Tliewidtli of tiie arrow istiiesum of tiireevaiues: tiie 
widtii of tiieactuai dement (200 pixds), piustiie widtii of tlie padding surrounding it on botii sides 
(two times 10 pixds), pius tiie widtii of tlie borders on botii sides (two times 2 pixds), resulting in a 
total width of 224 pixds. So, if you wanted the entire box to be 200 pixds wide instead, you'd need 
to set the width property of the MyDiv sdector to ivepx. 0 utside the border of the dement, margin 
could further influence the gap between this dement and its surrounding dements. 

The example shows the effect on the width only, but the same principles apply to the hdght of de- 
ments. Keep this box modd in mind when laying out your pages. W hen things end up wider or taller 
than you anticipated, checl< the width, height, padding, border, and margin propertiesin theCSS 
style sheet. 

In the next exercise, you modify the site's homepage that you created in the previous chapter. You 
add the basic layout for the site, which is then styled using a style sheet. In Chapter 6 you use this 
page again when you upgrade it to a master page. 

^^^^^^Q Styling the Planet Wrox Homepage 

In this exercise you modify two files. First, you add the basic layout dements to the Default .aspx page 
to create room for a header, a menu, the main content area, a sidebar, and a footer. Then you modify 
the styles. CSS file from the styles folder to change the size and location of these dements. Finally, 
you attach the style sheet to the page, so the style information is applied when the page is viewed in the 
designer or in a browser. 

1. 0 pen the Default . aspx file from the root of your website and, if necessary, switch to M arkup 
View. 

2. M odify the code within the <f orm> dement so it ends up lil<e this; 

<form id="forml" runat="server"> 
<div id="PageWrapper"> 

<header>Header Goes Here</header> 
<nav>Menu Goes Here</nav> 
<section id="MainContent"> 

<hl>Hi there visitor and welcome to Planet Wrox</hl> 

</section> 

<aside id="Sidebar">Sidebar Goes Here</aside> 
<f ooter>Footer Goes Here</f ooter> 
</div> 

</ form> 

M ake sure that the wdcome message you added in the previous chapter ends up between the 
opening and dosing tag of the Maincontent <section> dement. If you were already famil- 
iar with versions of H TM L before HTM L5, you may a bit surprised by the new dements such 
as header, section, and footer. T hese dements Were i ntroduced in HTM L5 to give a better 
semantic structure to your documents. Refer to Chapter 1 for a quick introduction to H TM L5. 

3. Open the styles. CSS file from the styles folder. If you added some code to this file earlier, 
remove that code first. 
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4. At the top of the CSS file, type the following code that uses an ID selector to select the header 
element: 

header 

{ 
} 

5. Position your mouse between the curly braces, right-clicl<, and choose Build Style from the context 
menu. The M odify Style dialog box shown in Figure 3-6 appears. 


Category: 


Block 

Background 
Border 

Box 

Position 
Layout 
List 
Table 


Description: 


Modify Style 


font-Family: 
font-size; 
font-weight; 

Font-style: 
font-variant: 
text-transForm; 
color: 


10 


text-decoration: 
O underline 
O overline 
O line-through 

□ blink 

□ none 


AaBbYyGgLUj 


OK Cancel 


FIGURE 3-6 


6. In the Category list on the left, click Background and then open the drop-down list for the back- 
ground color. From the color picker that appears, click the Silver color, as shown in Figure 3-7. 

Alternatively, you can type the hexadecimal color code for Silver (#cococo) in the background- 
color text box directly. 

7. Switch to the Position category by clicking it in the list on the left. The panel that appears enables 
you to set position-related information, including the height and width. Under width, enter 844 and 
make sure that px is selected in the drop-down list at the right. For the height, enter 86. Click OK 
to dismiss the dialog box and to insert the declarations into your code, which now looks like this: 

header 
{ 

background- color : #COCOCO; 
width: 844px; 
height: 86px; 

} 
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Modi^ Style 


Category: 


Font 
Block 

background <olor: 

Background 

background-image : 

background -repeat; 

Border 
Box 

Position 
Layout 
List 

background-a ttachment: 
(x) background -position: 

Table 

(y) background -position: 



□ ■ □ ■ i^u u m 



■ More Colj Silver \ 

V 1 ; : PX V 

V|fl|px V 


AaBbYyGgLUj 


Description; 


OK I I Cancel 


FIGURE 3-7 


8. Repeat steps 4 through 7, this time creating the following rules. If you prefer, you could also type 
in this code directly in the code editor. 

{ 

font-family: Arial; 

} 

hi 

{ 

font-size: 20px; 

} 

#PageWrapper 
{ 

width: 844px; 
margin: auto; 

} 

nav 
{ 

width: 844px; 

} 

section#MainContent 
{ 

width: 664px; 
float: left; 
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} 

aside 
{ 

background- color : Gray; 
width: 180px; 
float: left; 

) 

footer 
{ 

background- color : #COCOCO; 
width: 844px; 
clear: both; 

} 

The float and clear properties are in tlie Layout category of tiie M odify Style dialog box, 
whereas the text-decoration property is in the Font category. Si nee the Universal selector (*) 
applies to all elements in your site, it's common to move it to the top of the CSS above, even above 
the header selector, which you could do now. 

9. When you're done creating the rules, save and close the styles, ess file, because you're done with 
it for now. 

10. Open the Defauit.aspx file again and switch to Design View. From the Solution Explorer, drag 
the styles .CSS file from the styles folder onto the page. You should immediately seethe Design 
View change to reflect the code you wrote in the style sheet. When you drop the style sheet on the 
page, VS inserts code in the <head> section of the page in M arl<up View that attaches the style 
sheet to the document: 

<head runat=" server "> 
<title></title> 
<style type="text/css"> 

. auto-stylel 

{ 

color: #FFOOOO; 

} 

</ style> 

<link href="Styles/Styles.css" rel="stylesheet" type=" text/ess" /> 

</head> 

You can also drag an existing stylesheet from the Solution Explorer directly in the <head> section 
of a page in M arkup View. W hen you do that, VS adds the same <iink> element although the 
order of the attributes could be slightly different. 

11. Since the site uses HTM L5, you need a browser that supports this latest HTML version for the 
page to render correctly. For older browsers, such as Internet Explorer 8 and below, you can use 

a nifty JavaScript library called M odernizr. One of the many features of this library is dynamically 
adding support for new HTML elements such as nav, section and aside through JavaScript. 
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Adding M odernizr to your site is very easy using tlie Paci<age M anager Console tliat sliips witli 
Visuai Studio. To add tlie library, foiiow tliese steps: 

1. CliooseTooiso Library Paci<age M anager o Paci<age M anager Console. 

2. Type the following command and press Enter; 

Install-Package Modernizr 

3. After a short delay, your site is expanded with a file called packages . conf ig that keeps 
tracl< of the installed pacl<ages and a scripts folder that now contains the file modernizr- 
2 .6.2 . js. N ote: your version number could be different if a newer version of M odernizr 
has been released by the time you read thisbool<. To add this library to your page, open 
Default .aspx in M arl<up View and drag the file from the Solution Explorer to the head sec- 
tion of the code, directly after the linl< to the style sheet. You should end up with this code: 

<link href = "Styles/Styles . CSS" rel="stylesheet" type= "text/ess " /> 
<script type=" text/ javascript" src="Scripts/modernizr-2 .6.2 . js"></script> 

</head> 

Y ou should add the M odernizr library to your site even if you have a modern web browser. Since 
you can't control the browsers visiting your site, you want to mal<e sure everybody sees your site as 
intended. Adding M odernizr fixes the HTM L5 compatibility issues for older browsers while hardly 
causing any overhead. You can learn more about M odernizr on its website at http: //modernizr 
.com/. You'll see a lot more about the Package M anager Console in Chapter 11. 

12. Finally, save the changes to all open documents (press Ctrl+Shift+S) and then request Default 
.aspx in your browser. Your screen should look similar to Figure 3-8, which shows the page in 
M ozilla Firefox. 


Fi refox - 


LJ http://localho5ti49194/Default.aspx 


1±L 


^ ^ localhost:49194/DefaultasF 


7 ^ 4J ' 'Soogle 


Header Goes Here 


Menu Goes Here 

Hi there visitor and welcome to Planet Wrox 

We're glad you're paying a visit to www-PlanetWrox.com , the coolest music community site on 
the Internet 

Feel free to have a look around; there are lots of interesting reviews and concert pictures to 

be found here. 


Footer Goes Here 


FIGURE 3-8 
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How It Works 

The Style Builder makes it easy to select CSS properties and change their values. You don't need to 
memorize every little detail about CSS, but instead you can create your CSS code visually. Once you get 
a better understanding of CSS and its many properties and values, you may find yourself entering CSS 
in theCSSfiledirectly, because that's often quicl<er to do. 

N ote that the header, pagewrapper, nav, and footer elements have an exact width of 844 pixels. This 
way, the site fits nicely on screens with a size of 1024 x 768 pixels, a common screen size for many of 
today's computers, without being squeezed between the Windows borders. Systems with bigger screens 
simply center the site in the available space. This centering is done by the pagewrapper element, which 
has its margin Set tO auto. This means that the available space on the left and right sides (but not at the 
top and bottom) is equally divided, effectively centering the Pagewrapper element in the middle of the 
browser window. 

N ote also that the Maincontent section and the aside are positioned next to each other. You do this 
with the C SS float property: 

sectionttMainContent 
{ 

width: 664px; 
float: left; 

} 

aside 
{ 

background- color : Gray; 
width: ISOpx; 
float: left; 

} 

This tells the Maincontent to "float" on the left side of content that follows it, effectively placing the 
aside to the right of it. You need to tell the aside to float as well; if you leave it out, it will be placed at 
the left of the page, right where it was before you applied the CSS. If you have multiple aside elements 
in your site (which is a common practice), you can target this aside that acts as a sidebar by adding an 
id attribute (such as sidebar) just as I did with the Maincontent section element and then update the 
CSS as follows: 

aside#Sidebar 
{ 

} 

The combined width of the Maincontent and aside elements adds up to 844 pixels, which is exactly 
the width of their parent element: the pagewrapper. 

To end the float and tell the footer element to be placed directly under the Maincontent and aside 
elements, the clear property is used to clear any float (left or right) that may be in effect: 

footer 
{ 

background- color : #COCOCO; 
width: 844px; 
clear: both; 

} 
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The gray backgrounds are just temporarily added to the code, so it's easier to see what <div> ends up 
where. In future exercises, you modify theCSSfileagain to fit the scheme of the Planet Wrox website. 

To tell the browser what styles to apply, you linl< the style sheet in the head of the page: 

<link href ="Styles/Styles . CSS" rel="stylesheet" type="text/css" /> 

This tells the browser to lool< in the styles folder for a file called styles, ess and apply all rules in 
that file to the current document. 0 nee the browser has downloaded the CSS file, it applies all the styles 
it finds in thereto your HTML elements, resulting in the layout shown in Figure 3-8. 


In this exercise, you saw how to linl< an external style sheet to a page using the <iink> tag. 
H owever, you have more ways to include style sheets in your web pages. 

Adding CSS to Your Pages 

The first way to add CSS style sheets to your web pages is through the <iink> element that points to 
an external CSS file, as you saw in the previous exercise. Tal<ea lool< at the following <iink> to see 
what options you have when embedding a style sheet in your page: 

<link href="StyleSheet.css" rel="Stylesheet" type="text/css" media="screen" /> 

The href property points to a file within your site, just as you saw in the previous chapter when you 
created linl<s between two pages. Therei and type attributes tell the browser that thelinl<ed fileis 
in fact a cascading style sheet. The media attribute is quite interesting: it enables you to target differ- 
ent devices, including the screen, printer, handheld devices, and even Braille and aural support tools 
for visually impaired visitors. The default for the media attribute is screen, so it's OK to omit the 
attribute if you're targeting standard desktop browsers. 

You briefly saw the second way to include style sheets at the beginning of this chapter: using embed- 
ded <styie> elements. The <styie> element should be placed at the top of your ASPX or H TM L 
page, between the <head> tags. Within the <styie> tags, you can write the exact same CSS you saw 
earlier. For example, to change the appearance of an <hi> element in the current page only, you can 
add the following code to the<head> of your page: 

<head runat= " server" > 
<title></title> 
<style type=" text/ess "> 

hi 

{ 

color: Blue; 

} 

</style> 

</head> 

The third way to apply CSS to your HTML elements is to use inline styles with the style attribute 
that you saw in the previous chapter. Because the style attribute is already applied to a specific 
HTML element, you don't need a selector and you can write the declaration in the attribute directly: 

<span style="color : White; background- color : Black; "> 

This is white text on a black background. 
</ span> 
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Choosing among External, Embedded, and Inline Style Sheets 

Because you have so many options to add style sheets to your site, what's the best method to use? In 
general, you should give preference to external style sheets over embedded styles, which in turn are 
preferred over inline styles. External style sheets enable you to change the appearance of the entire 
site through a single file. M akeone change to your external style sheet file, and all pages that use 
this style sheet pick up the change automatically. 

However, it's perfectly acceptable to use embedded and inline styles as well in certain circum- 
stances. If you want to change the look of a single page, without affecting other pages in your site, 
an embedded style sheet is your best choice. The same applies to inline styles: if you only want to 
change the behavior of a single element in a single page, and you're pretty sure you're not going to 
need the same declaration for other HTM L elements, you could use an inline style. 

A n important thing to consider is the way that the various types of style sheets override each other. 
If you have multiple identical selectors with different property values, the one defined last takes pre- 
cedence. For example, consider a ruledefined in an external stylesheet called styles. ess that sets 
the color of all <hi> tags to green: 

hi 

{ 

color: Green; 

} 

N ow imagine you're attaching this style sheet in a page that also has an embedded rule for the same 
hi but that sets a different color: 

<link href ="Styles/Styles . CSS" rel="stylesheet" type="text/css" /> 
<style type=" text/ess "> 

hi 

{ 

color: Blue; 

} 

</style> 

With this code, the color of the actual <hi> tag in the page will be blue. This is because the embed- 
ded style sheet that sets the color to blue is defined later in the page, and thus overrides the setting in 
the external file. If you turn the styles around like this, 

<style type="text/css" > 
hi 
{ 

color: Blue; 

} 

</style> 

<link href ="Styles/Styles . CSS" rel="stylesheet" type="text/css" /> 

the heading will be green, because the setting in the external style sheet now overrules that of the 
embedded style. 

The same principle applies to inline styles. Because they're defined directly on the HTM L elements, 
their settings take precedence over embedded and external style sheets. 

It's also good to know that CSS generally overrules attributes on H TM L elements. For example, if 
you have a CSS rule that sets the width and height of an image, the height and width attributes 
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on the img element are ignored. For example the image in this code snippet ends up as a 100-pixel 
square: 

img 
{ 

height: lOOpx; 
width: lOOpx; 

} 

<img src="SomeImage . jpg" width="200px" height"200px" /> 


NOTE There's a lot more to CSS than what is shown here. To learn more 
about CSS, pick up a copy of Beginning CSS: Cascading Style Sheets for 
Web Design, 3rd Edition Wrox, 2011 by Richard York and Ian Pouncey (ISBN: 
978-0-470-89152-0). 


In general, it's recommended that you attach external files at the top of the <head> section, followed 
by embedded stylesheets. That way, theexternal file defines the global lool< of elements, and you 
can use embedded styles to overrule the external settings on a page-by-page basis. 

VS mal<es it easy to move embedded style sheets to an external CSS file, something you learn how to 
do in the next section, which discusses the remainder of the CSS tools in VS. 

WORKING WITH CSS IN VISUAL STUDIO 

The previous version of VSalready had a number of great toolson board to make working with CSS 
as easy as possible, including: 

>• The CSS Properties G rid, which enables you to change property values. 

The M anage Styles window, which enables you to organize styles in your site, changing them 
from embedded to external style sheets and vice versa; reorder them; link existing stylesheets 
to a document; and create new inline, embedded, or external style sheets. 

>■ The Apply Styles window, which you can use to choose from all available styles in your site 
and quickly apply them to elements in your page. 

>■ The Style Builder, which you can use to visually create declarations, as you saw earlier. 

In VS 2012, the CSS tools have been greatly enhanced and now support the following options 
as well: 

> H ierarchical indenting, which makes your CSS code easier to understand. 

>- Smarter Intel 11 Sense features, which makes it easy to enter CSS code manually. 

>• A number of helpful editor features such as the ability to easily comment and uncomment 
code, wrap code in collapsible regions, a color picker, and code snippets. 

The next sections give you a detailed look at these tools. 
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Using the CSS Editor 

The CSS text editor in VS liosts a number of powerful features, demonstrated in tlie next Try It 0 ut 
exercise. 


TRY IT OUT 


Trying Out the CSS Editor 


In tliis exercise you modify tlie styles .ess file you created earlier by adding a few new styles. Along 
theway you're introduced to a number of theCSS editor features listed earlier. 

1. Open the styles, ess file from the styles folder and locate the section#Maincontent selector. 
Right below its closing curly brace, add the following CSS selector that targets linl<s (a elements) in 

theMainContent SeCtion: 
section#MainContent a 


Bsectioni*MainContent a 
|{ 

color: # 



OpacTty: 


3. 


} 

Between the opening and closing curly brace type 
color, followed by a colon (:) and then by a hash 
symbol (#). As soon as you type the hash symbol, 
VS presents you with a color picl<er. If you clicl< the 
down arrow at the right of the color picl<er, 
it expands and shows more options, visible in 
Figure 3-9. 

This color picl<er has a few interesting features. 
Firstly, thetop row of colored squares contains a 
list of colors that are defined in your style sheet. 
This is a great way to quicl<ly picl< a color you've 
already been using for another selector. The list of 
recognized colors is then followed by a vertical bar, 
which in turn isfollowed by somedefault colors figure 3-9 

thatVSaddsfor you. In Figure3-9 you can see two recognized colors: a light and a darl< shade 
of gray. The other colors are all defaults. Secondly, you can mix your own color by dragging the 
mouseover the large square in the middle as well as over the colored vertical bar on the right. 
Finally, using the tiny color picl<er icon at the bottom right of the screen, you can quicl<ly select 
a color from any other W indows application or your desktop. This is a great way to retrieve the 
color from an image you may have opened in some graphics program, for example. 

If you want to type in your own color information, simply ignore the color picl<er (or close it by 
pressing the Esc l<ey). 

For this exercise, clicl< a green square, which inserts the hexadecimal value (such as #4cf f oo) for 
the color for you. Complete the line of code by entering a semicolon and then press Enter. 

On this new line type the letter t. This brings up the Intel 11 Sense list and shows you all properties 
that start with the letter t as shown in Figure 3-10. 
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BsectionliMainContent a 



{ 





color: #4cffa8; 







} 

# stroke-iinejoin 




* stroke-miterlimit 


bias 




{ 

* stroke-opacity 



* stroke-width 




tab-size 

This property determines the width of the tab character (U+0(X)9), in space 


) 

0 table- layout 

characters (11+0020), when rendered 


0 tect-align 

■ 

afo 

§0 text-align-last 



{ 

0 text-anchor 



FIGURE 3-10 


N ext, type the letter d. The list is filtered further as you can see in Figure 3-11. 


BsectionKMainContent a 

{ 

color: #4cff00; 
td^ 

' ^ ^ ^^^^^^^^^^^^^^^^^^^1 Decorations applied to font used for an elennent's text. 
QggSE' text-decoration-color 
^ §P text-decoration-line 
^ text-decoration-skip 
tect-decoration-style 
transition-delay 
3? transition-duration 


FIGURE 3-11 


N otice how this filtering is done in a pretty smart way. The filter does not only limit the list to 
properties that start with or contain the letters td (which in this case don't exist), but it also sup- 
ports what is called a title case search where it lists items that have each word in the property 
begin with the letters you're searching for. In this case, td matches items such as text -decora- 
tion as well as transition-delay. If yOU type tdc instead, the list would only show text-dec- 

oration-coior. T he Same appi ies to all other CSS properties. For example, be would give you 
background-color, bbw givesyou border-bottom-width, and SO on. This mal<es it extremely 
easy to write CSS code with only a few keystrokes. 

N ote how some items in the list have an icon with a pair of scissors instead of the standard prop- 
erty icon. The scissors icon indicates a code snippet that you can expand by pressing tab twice. 
Doing so inserts browser-specific CSS into the file that is used for CSS properties that are not yet 
widely implemented by all browsers. 

Continuethis exercise by selecting text-decoration from the list. You can double-click the 
value, press Enter, or press Tab, and VS completes the property for you. N ext, type a colon and 
then underline as the valuefor the text -decoration property. Close the line with a semicolon. 
Your final code should now look I ike this: 

section#MainContent a 
{ 

color: #4cffOO; 
text-decoration: underline; 

} 
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4. Add two more style rules below the one you just created with the following code: 

section#MainContent a: visited 
{ 

color: #FFOOOO; 
text-decoration: underline; 

} 


section#MainContent a: hover 
{ 

color: #FFA5 00; 
text-decoration: underline; 

} 


B section#MainContent 


width : 
float: 


664px; 
left; 


sectionitMainContent a 

< 

color: »4cff00; 
text-decoration: underline; 


} 


section#MainContent a:vi5ited 

{ 

color: #FF0ee0; 
text-decoration: underline; 

} 

section#MainContent a: hover 

{ 

color: »FFA5B0; 
text-decoration: underline; 

) 


5. N ext, choose Edit o Format Document from the main menu. 
Alternatively, press Ctrl +K followed by Ctrl+D. This shortcut and 
menu command are available for other types of files as well, such 
as HTM L, ASPX, Visual Basic, and C#flles. When executed, they 
format the document according to the settings for that particular 
file type. In the case of CSS, It formats your code by placing the 
opening curly brace at a consistent location, and Indenting and for- 
matting the Individual rules. It also performs what's called a hier- 
archical Indent. To best understand how this works, take a look at 
Figure 3-12, which depicts the section#Maincontent rule set as 
well as the new selectors for the a elements you added earlier after 
you've formatted the document. 

N otice how the section#Maincontent a rule Set has been 
Indented below the section#Maincontent ruleset. This helps to 
understand the relationship between the two selectors used by the 
rule set (section#Maincontent a Only targets a elements wIthIn a parent section element with an 

id of MainContent). Likewise, the section#MainContent a:visited and section#MainContent 

a:hover rule sets are I ndented below thea element because they can be considered "children" of 
the a element. If you don't I Ike this behavior, you can turn It off using Tools o Options o Text 
Editor o CSSo Formatting. Alternatively, press Ctrl 4Q to put focus on the Quick Launch box, 
type CSS Formatting and press Enter. This opens the same Options dialog box. W hi le you're there, 
spend sometime browsing around the Items under theText Editor node to get an Idea of how you 
can change the formatting of the many languages that VS supports. 

6. The final two editor features worth showing here are regions and comments. If your CSS code 
becomes unwieldy. It may help to wrap some parts of the code that belong together In a region. A 
region In VS can then be collapsed to hide the code, and expanded again when you need to change 
It. To create a region, you wrap the code In a region / endregion pair using CSS comment syntax. 
For example: 


FIGURE 3-12 


/*#region Name Of Region */ 

... Your CSS code here 
/*#endregion*/ 

For this exercise, add the opening region statement with a name of 
M ain Content (/*# region Main Content */) right above the 
section#Maincontent rule Set, and theclosing statement 


E)/*#region Main Content */ 
□ section#MainContent 

{ 

width: 664px; 
float: left; 

) 


FIGURE 3-13 
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(/*#endregion*/) bdow the section#Maincontent a: hover rule Set. 0 nce the region is Cre- 
ated, in Figure 3-13 you now see a minus (-) icon in the 
gutter next to the text editor. 


You can now collapse the region by clicl<ing the minus icon. VS hides 
the code block and shows the name of the region instead, as shown in 
Figure 3-14. 

This makes it really easy to get some code out of the way when working 
with large code files. N ote: regions are also supported by other file 
types such as C#and VB files although each language uses a slightly 
different syntax. 


B hain ContentI 


B aside 

l{ 

background-color: Gray; 
width: 180px; 
I float: left; 

b 


FIGURE 3-14 


The region feature in VS makes use of standard CSS comments syntax. This 
means that the browser ignores the region code as well as its name. 

To comment out other code (so it's not interpreted by the browser), select some 
text and then pressCtrl-H< followed by Ctrl-fC (for Comment). Thecodeisthen 
commented out using /* and */, as shown in Figure 3-15. 


H/'nav 
{ 

width: 844px; 
}•/ 


FIGURE 3-15 


To uncomment the code again, press Ctrl -H< followed by Ctrl-RJ (for Uncomment). Both com- 
mands are also available in the Edit o Advanced menu and on the Styles toolbar. You can also 
start a comment manually by typing /*. VSthen inserts the closing */ for you automatically. 

7. Save the changes to the CSS file. You can leave the region code in, but make sure you uncomment 
any code you may have commented out in the preceding step. 

8. Switch to theDefauit.aspx page and, if necessary, switch to Design View. Select the text "look 
around" in the paragraph. If you typed something else in an earlier Try It Out, select that text 
instead. At this stage, all that's important is that you have some text to turn into a link. 

9. On the Formatting toolbar, click the Convert to H yperlink button (with the link symbol and arrow 
on it), click the Browse button in the dialog box that appears, and select Default .aspx in the root 
of the site. This way, the link points to the same page it's defined in, which is fine for this exercise. 
Click OK twice to dismiss the dialog boxes. 

10. Save the changes to all open documents (choose File o Save All from the main menu or press 
Ctrl-f-Shift-f-S) and then request Default, aspx in your browser by pressing Ctrl-ff 5. You should see 
the page appear with the " look around" link underlined, as shown in Figure 3-16, which shows the 
pagein GoogleChrome. 

11. H over your mouse over the " look around" link; note that it turns to orange. 

12. N otice how the link to www.pianetwrox.com is green (provided you haven't visited this site 
before), whereas the link to Default .aspx is red (because you're currently viewing Default .aspx, 
the browser marks this page as "visited".) If you visit the Planet Wrox website and then come back 
to your Default .aspx page again, the link to the Planet Wrox site will have turned red as well. 

H overing over it still turns it to orange. If you want to test the page in another browser, right-click 
Default .aspx in the Solution Explorer and choose Browse With from the context menu. If your 
alternate browser is listed there already, select it from the list and then click Browse. Optionally, 
you can make this browser your default by clicking the Set as Default button. 
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If your browser is not listed, clicl< the Add button and then the ellipsis next to the Program N ame 
box to search for your favorite browser. W hen the browser is displayed in the list, clicl< it to select 
it and then clicl< Browse to open the page in that browser. The page should now appear in your 
alternate browser. 


localhost:49m/Default.a; 


<- -~ C O localhost:49194/Default.aspx 
Header Goes Here 

Menu Goes Here 

Hi there visitor and welcome to Planet Wrox 

We're glad you're paying a visit to v^/vvw PlanetWrox coni . the coolest music community site on 
the Internet. 

Feel free to have a look around : there are lots of Interesting reviews and concert pictures to 

be found here. 

Footer Goes Here 


Sidebar Goes Here 


FIGURE 3-16 


How It Works 

This exercise started off by showing you some of the features of the CSS editor in VS. The IntelliSense 
list filtering and title case search are great time savers when writing CSS code. You'll need some time to 
get used to them, but once you have the hang of it you don't want to worl< without them. 

The : hover and : visited parts on the a selector you added are probably new to you. These selec- 
tors are called pseudo class selectors. The a: visited selector is applied only to linl<s that the user has 
already visited in the browser. The a:hover selector is applied only to the <a> tag when the user hovers 
the mouse over thelinl<. 

W hen you open the page in the browser, the updated stylesheet is downloaded and the browser then 
applies the a: visited rule set to all linl<s in the Maincontent section you visited before. W hen you 
hover your mouseover a linl<, the rule set section#Maincontent a: hover is applied, causing the link 
to turn orange. 

Viewing your pages in different browsers is a good thing to do. Although modern browsers tend to 
render a page more and more similarly, subtle differences exist that you need to be aware of and handle 
in your HTML and CSS code. Installing a few different browsers on your system (Internet Explorer, 
Firefox, Safari, Opera, and Chrome, for example), assigning them to theBrowseWith dialog box as 
shown in this Try It 0 ut, and testing your pages in these browsers as often as you can will help to 
ensure your pages lool< exactly right in the majority of the browsers. 


Useful as external style sheets may be, sometimes you really want to use embedded or inline styles 
instead. Creating and managing those styles, explained in the next section, is just as easy. 
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Creating Embedded and Inline Style Sheets 

W hen you're working witli a page in Design View, you often need to mal<e minor tweal<sto part of tlie 
page, lil<e styling a piece of text, aligning an image, or applying a border to an element. At this stage, 
you need to make a decision about whether to create an inline, embedded, or external stylesheet. As 
you saw earlier, you should opt for external or embedded stylesheets if you envision you're going to 
reuse a style later. VS doesn't care much, though. It enables you to create styles at all three levels. Even 
better, it enables you to easily upgrade an embedded styleto an external one, or copy inline style infor- 
mation to a different location, giving you great flexibility and theoption to change your mind later. 

In the next exercise, you see how to create inline and embedded style sheets. You see later how to 
move those styles to an external stylesheet, enabling other pages to reuse the same styles. 


TRY IT OUT 


Creating Embedded and Inline Styles in a Page 


In thisTry ItOut, you add a styleruleto the<hi> element of the page, to remove the default margin 
that a browser draws around the heading. In addition, you style the first paragraph using a class attri- 
bute, giving it a different look to make it stand out from the other paragraphs on the page. 

1. Go back to VS and make sure that the Default .aspx page is open in Design View. 

2. Click onceon the <hi> element in the Document Window to select it and then choose 
Format o N ew Style. The N ew Style dialog box appears (visible in Figure 3-17), which is pretty 
similar to the M odify Style dialog box you saw earlier. 


New Style |^^^^| 

Selector: | .ifJWJfflfJI 

V 1 [II Apply new style to document selection 

Define In: Current page 

vj URL: 1 v| 1 Browse... 1 



Category: 



Description: 


font -family: | 

font-size: | 



font- weight: | 

V 


font-style: | 

V 


font-variant; { 

V 


text -transform: | 

V 


color: 1 

V 



text-decoration: 

0 underline 
n overline 

1 I line-through 
□ blink 
Qnone 


AaBbYyGgLUj 


OK Cancel Apply 


FIGURE 3-17 
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3. At the top of the screen, open the Selector drop-down list and choose (Inline style). It's the first 
item in the list. This ensures that the new style is applied as an inline style to the<hi> element. 

4. Switch to the Box category, shown in Figure 3-18. 

This dialog box has a handy diagram that serves as a refresher on the CSS Box M odel, showing 
you where the properties padding, border, and margin end up. 

By default, browsers draw some white space above or below an <hi> element, but the actual 
amount differs between browsers. To give each browser the same consistent settings, you can 
reset the padding to 0 and then apply a little bit of margin at the bottom of the heading, which 
creates some distance to the elements following it. To do this, set padding to o in the top box and 
clear the value from the drop-down list next to the text box. By leaving the Same for All option 
selected, VS creates a shorthand declaration for you. Then uncheck Same for All for the margin 
section, enter o for the top, right, and left boxes, and clear the value from the drop-down next to 
each value. N ext, enter lo for the bottom text box and make sure px is selected in the drop-down 
list. Your screen should now look like Figure 3-18. 


I Category: 
Font 
Block 

Background 
Border 

Position 
Layout 
List 
Table 


Modify Style 


CSS box model reference: 


Top 

Margin 






r 

Padding 




padding: 

Same fbr aD 


margin: 

□ same fbr all 

top: 

lo 


top: 

0 v|= 

i\ - 

right 



right 

0 v|= 


bottom: 


V 

bottom: 

10 vf^ 

nl 

lefb 


V 

leffa 

0 v\= 



Descripbckn: 


AaBbYyGgLUj 


baddrig: 0; margin: 0 0 lOpx 0 


FIGURE 3-18 


Click OK to close the dialog box and apply the changes to the heading. You end up with the fol- 
lowing <hi> element with an inline style in M arkup View: 

<hl style= "padding: 0; margin: 0 0 lOpx 0"> 

Hi there visitor and welcome to Planet Wrox 
</hl> 
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5. N ext, in Design View, select tlie first paragrapli by clicl<ing it. A small glyph appears to indi- 
cate you selected a <p> element, as visible in Figure 3-19. The Tag Selector at the bottom of the 
Document Window should highlight the <p> element. 


1 5 Design | ^ Split <• Source |^ 

<html> 

<body> 

<form#form1 > 

< diSi#P ageWra p pe r > 

<section#MainContent> 1 <p> 


FIGURE 3-19 


6. With the paragraph still selected, choose Format o N ew Style from the main menu. This time, 
instead of creating an inline style, type the text .introduction in the Selector box that is visible in 
Figure 3-20. Don't forget the dot ( .) in front of the selector's name. 

7. At the top of the screen, select the checl< box for Apply N ew Style to Document Selection. With this 
setting on, the new class you're about to create is applied to the <p> element that you have selected. 

8. From the font-style drop-down list, choose italic. Your N ew Style dialog box should now look lil<e 
Figure 3-20. 


Selector; 

1 .Introduction 

^1 

v\ Apply new style to document selection 


Define in; 

1 Current page 

v| LRLl 


1 Browse... 1 







Category: 



text-decoratron: 
I I underline 
I I overline 
n line-through 
□ blink 
[I] none 


AaBbYyOgUJj 


Description: font-style: italic 


^^^^^^^^^^ 


OK Cancel Apply 


FIGURE 3-20 


9. Finally, click OK. N ote that the entire paragraph is now displayed with an italic font. 

10. With the <p> element still selected, open the CSS Properties Grid (see Figure 3-21) by choosing 
View o CSS Properties. This grid gives you an overview of all the CSS properties and shows which 
ones are currently active for your page. 
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CSS Properties 



ID?*® 


Summa 


Applied Rules 


(Current Page) 

#PaqeWrapper 

<div#PageWrapper> 


A 


<section#MainContent> 



section#MainContent 

< sect! on#Main Content > 




<p.lntroduction> 



.Introduction 

1 <p.lntroduction> 


V 

CSS Properties 




^ Font 




font- style 

italic 



color 




> font 





FIGURE 3-21 


This grid sliows a list of applied rules in the top part of the window in the order in which they 
are applied. The bottom part of the window is used to show the CSS properties for those rules. In 
Figure3-21 you see the rules that are applicableto the .introduction selector. 

11. Locate the color property in the CSS Properties Grid and set it to a darl< blue color, 11 l<e #003399. 
To achieve this, open the drop-down list for the property value and choose a color from the color 
picl<er. If the color you're looking for is not available, clicl< the M ore Colors button to bring up the 
extended color picl<er, shown in Figure 3-22. 



FIGURE 3-22 


Instead of using the color picl<er, you can also type a value in the Properties Grid directly. This is 
how many of the properties worl< in the CSS Properties Grid: they let you enter values directly or 
enable you to changethe value visually using a drop-down list or a button with ellipses at the end 
of the property's value box. Figure 3-23 shows the different options you have for the f ont-styie 
property in a convenient drop-down list. 

Tal<e special note of the three buttons at the top of the window, because they house some use- 
ful functionality. The first two buttons enable you to switch between categorized modeand 
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alphabetical mode, making It easier to find the right property. The third button enables you to dis- 
play the applied properties at the top of the list or at their default location In the list. 


CSS Properties 


ll°B| 

Applied Rules 
#PaqeWrapper 

section#MainContent 
.Introduction 
CSS Properties 

■4 Font 

font- stifle 
color 
> font 
font-familv 
font-size 
font-variant 


Summary 
(Current Page) 


<div#PageWrapper> 

<section#MainContent> 

<section#MainContent> 

<p,lntroduction> 

<p.lntrciduction> 


italic 


normal 
oblique 
P inherit 


FIGURE 3-23 

12. Finally, save all changes and open Default, aspx In your browser (see Figure 3-24). You'll see that 
the first paragraph Is now displayed with a blue and Italic font except for the link In the text, which 
Is green or red depending on whether you visited that site before. Additionally, If you followed all 
the Instructions from the previous chapter, the text "paying a visit" Is red, set by the embedded 
CSS class. 


^ ^ http://localhost:49194/Def3ult.aipx 



Header Goes Here 


Menu Goes Here 

Hi there visitor and welcome to Planet Wrox 

We're glad you're paying a visit to www. PianetWrox com, the coolest music community site 
on the Internet 

Feel free to have a look around : there are lots of interesting reviews and concert pictures to 

be found here. 


Footer Goes Here 


FIGURE 3-24 


13. Switch back to VS and look at your page In M arkup View. In the <head> section of the page, you 
should see the following embedded stylesheet: 


. Introduction 

font-style: italic; 
color: #003399; 


{ 
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} 

</ style> 

<link href ="Styles/Styles . CSS" rel="stylesheet" type="text/css" /> 

How It Works 

The numerous tools that VS offers make it easy to write CSS for your website. You don't need to 
hand codeanything, or remember aii thedifferent properties that the CSS standard supports. Instead, 
you can simply choose them from different lists on the CSS Properties G rid. This grid enables you to 
enter values manually but also offers handy tools to select colors, files, items from drop-down lists 
and more. 

All changes you mal<e in the Properties Grid are applied to the relevant style sheet, whether you're 
worl<ing with an inline, embedded, or external stylesheet. Atthesametime, theDesign View is 
updated to reflect the new C SS options you have set. 

W hen you look at the <hi> element, you can see that VS created an inline style with padding set to o to 
affect all four sides at once, and margin set too 0 lopx 0 to control all four sides individually. 


0 nee you have created a bunch of useful and reusable styles, you need a way to apply your existing 
styles to other pages or HTML elements. You see how this works next. 

Applying Styles 

If you have some experience with M icrosoft Word, you may be familiar with the Styles dialog box, 
which lists all available styles and enables you to apply them to selected portions of text. Thisway, 
you can quickly apply identical formatting to blocks of text. This works similarly in VS. W ith the 
Apply Styles window — accessible by choosing View o Apply Styles from the main menu — you can 
easily apply style rules to elements in the page. 


||j|yUK2^Q Using the Apply Styles Window 

I n this exercise, you reuse the . introduction class and apply it to the second paragraph of the page as 
well. That way, both paragraphs end up looking the same. 

1. Still in Default .aspx, make sure you're in Design View and then select the second paragraph of 
the page by clicking it. Ensure that the Tag Selector at the bottom of the Document Window shows 
that the <p> element is selected, and not another one like <strong> that may be part of the <p> 
element. If you have only one paragraph of text, create a new one first (by pressing Enter after the 
first paragraph in Design View), enter some text, and then select that paragraph. 

2. Open the Apply Styles window by choosing View o Apply Styles. M ake sure the window is not 
accidentally docked in the main Document Window, but either floats or is placed at the side of 
the Document Window. This window shows all the selectors it finds in the current page and any 
attached stylesheet. If you don't see all the styles shown in Figure 3-25, click the Options button 
and choose Show All Styles. 
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Apply Styles 

n X 

iOljl % Options 

Clear Styles 


A Current Page 


.auto-st>'le 1 


V .Introduction 


A Styles.css 


^ =PageWrapper 


A Contextual Selectors 


A Styles.cs$ 


■J * 


FIGURE 3-25 


3. Click the introduction class in tlie CSS Styies iist. VS adds a class attribute to tlie <p> tag: 

<p class=" Introduction" > 

Feel free to have a <a href ="Def ault . aspx" >look around</a>; there are lots of 
interesting <strong>reviews and concert pictures</strong> to be found here. 

</p> 

If you want to apply multiple classes, hold down the Ctrl key while clicl<ing one of the other 
classes in the list. This applies a list of classes separated by a space to the element's class attri- 
bute. You can follow the same steps to apply the selected style in M arkup View as well. 

4. Using the Clear Styles button, you can quickly remove existing classes and inline styles from a tag. 
Consider the HTM L fragment you saw in the previous chapter when you used the Formatting tool- 
bar to format text in the page. If you used the Foreground Color button, you ended up with code 
similar to this: 

We&#39;re glad youS;#39;re <span class="auto-stylel">paying a visit</span> 

To remove the class attribute, select the <span> tag in theTag Selector, or simply click the 
<span> tag in M arkup View and then click Clear Styles in the Apply Styles window, which you 
can see below the toolbar in Figure 3-25. You'll end up with this H TM L: 

We&#3 9;re glad you&#3 9;re paying a visit 

Because an empty <span> around the text has no use, VS removes it for you as well. In addition, 
VS also removes the auto-styiei rule because it's no longer used by any code on the page. 

Removing style attributes from HTM L elements works the same way. 
How It Works 

0 nee again, VS is able to keep all relevant windows in sync: the Design View, M arkup View, and the 
various CSS design tools. W hen you apply a class from the Apply Styles window, VS adds the requested 
class to the selected HTML element in M arkup View. It then also updates the Design View window. 
Similarly, when you remove a selector or a declaration from an embedded style in Design View, both 
the Design View and the CSS tools windows are updated. 
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The final CSS functionality you need to look at in thischapter islocated on theM anage Styles and 
Apply Styles windows. Besides helping you attach CSS files to your documents, these windows 
enable you to manage your styles easily. 


Managing Styles 

Because it's so easy to add new inline and embedded styles, your pages may quickly become a mess 
with styles all over the place. To achieve reusability, you should move as much of your inline and 
embedded styles as possible to an external stylesheet. This is exactly what the Apply Styles and 
M anage Styles windows enable you to do. 


TRY IT OUT 


Managing Styles with the Manage Styles and Apply Styles Windows 


Earlier in this chapter, you modified the <hi> element and applied padding and margin to the head- 
ing. H owever. Default .aspx is not the only page that could benefit from this style for a heading, so 
it makes sense to move it to the styles, ess file. Similarly, the introduction class seems reusable 
enough to include it in the styles .ess file so other pages can access it. This Try It Out shows you how 
to move styles around in your site. 


1. 
2. 


4. 


6. 


M ake sure that Default .aspx is still open and switch to M arkup View if necessary. 

Locate the <hi> element and click it once. VS highlights the tag in the Tag Selector at the bottom 
of the Document Window to indicate it's the active tag. 

Open the Apply Styles window by choosing View o Apply 
Styles from the main menu. Alternatively, if you have the win- 
dow docked with other windows, simply click its tab to make 
it active. Again, make sure the window is not accidentally 
docked in the main Document Window, but either floats or is 
placed at the side of the Document Window. At the bottom of 
theApply Styles window, you'll see an inline style appear (see 
Figure 3-26). 


Apply Styles 

• n 

X 

lOlll % 

Options ^ 



A 

</ #PageWrapper 



^ Contextual Selectors 



^ St}r|es.css 





^hl 


^ Inline Style 


Inline Style 



FIGURE 3-26 


Right-click Inline Style and chooseNew StyleCopy. TheNew 
Style dialog box appears, enabling you to create a new style 
based on the current selection. At the top of the window, 
choose hi from the Selector drop-down list, and from the 
Define In drop-down list choose Existing style sheet. From the 

URL drop-down list, choose Styles/Styles.css. If that item isn't available, click the Browse button to 
locate and select it. Y our dialog box should end up like Figure 3-27. 

Click OK to close the dialog box. VS creates a copy of the hi style and places it in the styles 
.CSS file. VS creates a new selector for hi in the styles. ess file instead of adding the padding 
and margin info to the existing rule set. If you want, you could combine the two selectors into one 
manually. 

In theApply Styles window, right-click Inline Style again, and this time choose Remove Inline Style 
from the context menu. This removes the style attribute from the hi element. 
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FIGURE 3-27 


7. From the main menu, chooseView o M anage Styles. Again, 
make sure the window is placed beside the Document 
Window and not docked in the Document Window. Under the 
C urrent Page item, locate the . introduction selector. 

8. Click the . introduction selector once, and then drag it into 
the area for styles, ess, for example dropping it after the hi 
selector. N ote that VS draws lines between the selectors as you 
hover over them to indicate the point where the selector will 
end up. Figure 3-28 shows how the .introduction selector is 
dragged from the current page into styles . ess, between the 

hi and #PageWrapper Sdectors. 

9. Once you drop the selector in the styles, ess section of the 
M anage Styles window, the associated style is removed from 
your current page, and then inserted in styles. ess. Because 
that CSS file is included in your current page using the <iink 
/> element, you won't see a difference in Design View. You 
can now remove the empty <styie> element from Default 
.aspx, because it's not needed anymore. 
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FIGURE 3-28 
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10. If you haven't already merged the two hi selectors, open styles, ess and scroll down to the end 
of the file. Copy the two lines for the padding and margin properties to the clipboard and then 
delete the entire selector. Scroll up in the file and then paste the two CSS rules inside the other hi 
selector. You should end up with this code: 

hi 
{ 

font -size: 20px; 
padding : 0 ; 
margin: 0 0 lOpx 0; 

} 

11. Save any pending changes you may have and then open Default, aspx in your browser by pressing 
Ctrl4f 5. N otethat the paragraphs haven't changed and still use the same blue and italic font. 

How It Works 

Unfortunately, VS doesn't allow you to move inline styles to external style sheet files. However, by 
creating a copy of the existing style, and then deleting the original inline style, you can achieve the 
same effect. M oving embedded or external stylesheets between files is a lot easier. You can simply 
drag a style from one file to another, and VS will automatically move the code for you. This mal<es it 
extremely easy to organize your CSS. Instead of leaving all your embedded CSS in your page because 
you're afraid to touch it, you can now simply drag and drop it into an external file. This makes it a lot 
easier to reuse those styles in other pages, decreasing page size and page bloat, and making your site a 
lot easier to manage. Obviously, it's important that the file you are moving your CSS to is attached to 
the pages you're working with. 


PRACTICAL TIPS ON WORKING WITH CSS 

Follow these tips to make the most of CSS: 

>■ Take some time to familiarize yourself with the many properties that CSS supports. The 
best way to do this is to create a brand-new page in your Demos folder, create a few HTML 
elements like <div> and <p> tags, and then simply experiment with all the different proper- 
ties. By trying out many of the properties on the CSS Properties Grid, you get a feel for what 
options you have available. This makes it easier later if you want to apply a certain effect to 
some piece of content. 

>• When creating custom CSS classes, try to comeup with names that describe the behavior of 
the rule, rather than the look and feel. For example, a class called .introduction to style 
the first paragraph of a page is a good description. It enables you to change the underly- 
ing values without affecting the actual meaning of the name. But classes with names like 
.BiueAnditaiic are guaranteed to give you problems later. What if you decide to change 
the blue to black later? Y ou either end up with a very odd class name not describing its own 
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behavior, or you'll need to rename the class and then update the entire site, changing refer- 
ences to the old class to .BlackAndltallc. 

> Try to create smaller and reusable rule sets that you can combine If required, rather than 
creating large, monolithic rules that can only be used on a single Ul element. For example. 
Instead of creating a style like this: 

. ImportantHeading 

color: Red; 
font-size: 20px; 
font-weight: bold; 

You're better off creating a few lightweight rules that are easier to reuse; 

hi 


font-size: 20px; 


Attention 


color: Red; 
font-weight: bold; 

When you apply the .Attention class to a heading llkethls: <hi ciass="Attention">, 
you get the exact same behavior you got when you gave It the ImportantHeading class. 
However, with the separate Attention class, you have created a reusable rule that you can 
apply to other elements that need the user's attention, like <p> or <span> elements. 


SUMMARY 

This chapter gave you a good look at CSS, the most Important language for styling your ASPX and 
HTML web pages. 

CSS enables you to overcome the limitations of H TM L with respect to styling your web pages 
because It Is designed to minimize page bloat, give you greater control over the look of your page, 
and generally help you create websites that load quicker and that are easier to maintain. 

Once you havea good understanding of the CSS terminology, you'll find It's easy to work with the 
many CSS tools that VS has on board. Tools like the M anage Styles and Apply Styles windows, the 
Style Builder, and the smart IntelllSenseIn the code editor makewrlting and managing CSS very 
easy. 

You can apply CSS not only to H TM L as you've seen In this chapter, but also to ASP.N ET Server 
Controls. The CSS you apply to those controls eventually ends up In the browser as plain HTML 
where the same principles apply as those you've seen In this chapter. The next chapter gives you a 
detailed look at the many available ASP.N ET Server Controls. 
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EXERCISES 


1. What is the main benefit of using an external style over embedded style sheets? 

2. Write a CSS rule that changes the appearance of all headings at level one (hi) in your page to the 
following: 

>• The heading uses an Arial font face. 

>• The heading should be blue. 

>• The heading must have a font size of 18 pixels. 

> The heading has a blue, thin border at the top and left sides. 

For the last requirement, check out VS's IntelliSense list in a CSS file to discover another short- 
hand version for the border property. 

3. Which of the two following rules is easier to reuse across pages in your website? Can you explain 
why? 

#MainContent 
{ 

border: Ipx solid Blue; 

} 

. BoxWithBorders 
{ 

border: Ipx solid Blue; 

} 

4. VS enables you to attach an external style sheet to a page in a number of different ways. Can you 
name two different options to do this? 


You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 

CSS Cascading style sheets, the language used to lay out web pages In the 

browser 

CSS Box Model The model on which the dimensions of elements are calculated with regard 

to height, width, padding, border, and margin 

Declaration A combination of a property and a value that determines the styling for the 

element to which the declaration applies 

Embedded style CSS code that is defined in a page in a <style /> element. Usually 

sheets referred to as embedded styles. 

External style sheets CSS code that is defined in a separate file and then included in a page 
using the <link /> element 

Inline style sheets CSS code that is defined directly on an element using the style attribute. 

Usually referred to as inline styles. 

Rule set A combination of a selector and one or more declarations wrapped in a pair 

of curly braces 


Selector 


A CSS construct to point to one or more elements in the page. Different 
selectors exist, including the Universal selector, the ID and Class selectors, 
and the Type selector. 


Working with ASP.NET Server 
Controls 

WHAT YOU WILL LEARN IN THIS CHAPTER: 

>■ What ASP.NET Server Controls are 

> The different kinds of server controls you have at your disposal 

> The common behavior shared among most of the server controls 

>■ How the ASP.NET run time processes the server controls on your 
page 

>■ How server controls are able to maintain their state across postbacks 
WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 
www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is ih the Chapter 4 dowhload. 

ASP.N ET Server Controls are the workhorses of ASP.N ET. Almost all theWeb Forms pages 
you build in Visual Studio (VS) will contain one or more server controls. These controls come 
in all sorts and sizes, ranging from simple controls like a Button and a Label to complex 
controls like the TreeView and the li stview that are capable of displaying data from a data 
source (I ike a database or an X M L file). You see these controls in Chapters 7, 13, and 14. 

The architecture of ASP.N ET Server Controls is deeply integrated into ASP.N ET, giving the 
controls a feature set that is quite unique in today's technologies for building websites. This 
chapter shows you what server controls are, how they work, and which ones are available out 
of the box when you install VS. 
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The chapter starts off with a general discussion of server controls. You see how to define them in 
your code by adding them to Design or M ari<up View. 

The section that follows gives you a thorough look at the many controls that are available in the VS 
Toolbox. 

INTRODUCTION TO SERVER CONTROLS 

It's important to understand how server controls operate and how they are completely different from 
the way you define controls in other languages I il<e classic ASP or PH P (another popular program- 
ming language for creating dynamic websites). 

For example, to influence the text in a text box in these languages, you would use plain H TM L and 
mix it with server-side code. This worl<s similarly to theexamplein Chapter 2 where the current 
date and time are displayed on the page. To create a text box with a message and the current time in 
it in classic ASP, you can use the following code: 

<input type="text" value="Hello World, the time is <%=Time{)%>" /> 

As you can see, this code contains plain HTM L, mixed with a server-side block, delimited by <% 
and %> that outputs the current time using the equals (=) symbol. This type of coding has a major 
disadvantage: the HTM L and server-side code is mixed, making it difficult to write and maintain 
your pages. Although this is a trivial example in which it's still easy to understand the code, this 
type of programming can quickly result in very messy and complex pages. 

Server controls work differently. In ASP.N ET, the controls "live" on the server inside an ASPX page. 
When the page is requested in the browser, the server-side controls are processed by the ASP.N ET 
run time— the engine that is responsible for processing requests for ASPX pages. The controls then 
emit client-side H TM L codethat isappended to the final page output. It'sthisHTM L code that 
eventually ends up in the browser, where it's used to build up the page. 

So, instead of defining HTML controls in your pages directly, you define an ASP.N ET Server 
Control with the following syntax, where the italicized partsdiffer for each control: 

<a,sp : TypeOf Control 1D=" ControlName" runat=" server" /> 

For the controls that ship with ASP.N ET 4.5 you always use the asp: prefix followed by the name 
of the control. For example, to create a TextBox that can hold the same welcome message and cur- 
rent time, you can use the following syntax: 

<asp:TextBox ID="Message" runat=" server" /> 

N ote that the control has two attributes: id and runat. The id attribute is used to uniquely identify 
a control on the page, so you can program against it. It's important that each control on the page 
hasa uniquelD; otherwisethe ASP.N ET run timewon't understand what control you're refer- 
ring to. If you accidentally type a duplicate control ID, VS signals the problem in the error list. The 
mandatory runat attribute is used to indicate that this is a control that lives on the server. Without 
this attribute, the controls won't be processed and will end up directly in theHTM L source. If you 
ever feel you're missing a control in the final output in the browser, ensure that the control has this 
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required attribute. N otetliat for non-server dements, iii<e piain HTML eiements, tlie runat attri- 
bute is optionai. Witli til is attribute, non-server controiscan be readied by your programming code. 
You iearn more about tliis iater in tlie bool<. 

You can easily add tlie runat attribute to an existing dement using a code snippet by typing runat 
and pressing tlie Tab l<ey. 

Tlie preceding example of thexextBox uses a sdf-closing tag where the closing slash (/) is embed- 
ded in the opening tag. This is quite common for controls that don't need to contain child content 
such as text or other controls. H owever, the long version, using a separate closing tag, is acceptable 
as wdl: 

<asp:TextBox ID="Message" runat="server"></asp:TextBox> 

You can control the default behavior of closing tags per dement using Tools o 0 ptions o Text 
Editor o HTM L o Formatting o Tag Specific Options. 

You can program against this text box from code that is dther placed inline with the page or in a 
separate Code Behind file, as you saw in Chapter 2. To set the wdcome message and the time, you 
can use the following code: 

VB.NET 

Message. Text = "Hello World, the time is " & DateTime .Now. TimeOfDay .ToString ( ) 
C# 

Message. Text = "Hello World, the time is " + DateTime .Now. TimeOfDay . ToString () ; 

Thedefinition of the control in themarl<up section of the page is now separated from the actual 
code that defines the text displayed in the text box, making it easier to define and program the text 
box (or any other control) because it enables you to focus on one task at a time. You can dther 
declare the control and its visual appearance in the markup section of the page, or program its 
behavior from a code block. 

In general, controls defined in M arkup View are not case-sensitive, although some of the values you 
can set are case-sensitive. I prefer to use the capitalization as suggested by IntdliSense. N ote that 
when usingC#, properties you use in theCode Behind are case-sensitive. 

You see how server controls send their underlying HTM L to the client in the next exercise. 


lljUHmg^Q Working with Server Controls 

In this exercise, you add a TextBox, a Label, and a Button control to a page. W hen you request the 
page in the browser, these server controls are transformed into H TM L, that is then sent to the dient. 
By looking at the final H TM L for the page in the browser, you'll see how the H TM L is completdy dif- 
ferent from the initial ASP.N ET markup. 

1. Open the Planet Wrox project in Visual Studio. 

2. In the Demos folder in the Solution Explorer, createa new Web Form called control sDemo.aspx. 
Choose your programming language and make sure the Web Form uses Code Behind. 
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3. Switch to Design View. From tine Standard category of tlie Toolbox, drag a TextBox, a Button, 
and a Label control onto the design surface within the dashed lines of the <div> tag that was 
added for you when you created the page. 

Type the text Your name in front of the TextBox and add a line breal< between the Button and 
the Label by positioning your cursor between the two controls in Design View and then press- 
ing Enter. If you're having trouble positioning the cursor between the controls, place it after the 
Label control and then press the left arrow l<ey twice. The first time you press it, the Label is 
selected; the second time, the cursor is placed between the two controls, enabling you to press 
Enter. Your Design View should now lool< lil<e Figure4-1. 
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FIGURE 4-1 


Right-clicl< the Button control and choose Properties to open up the Properties G rid for the 
control. Pressing F4 after selecting the Button does the same thing. The window that appears, 
shown in Figure 4-2, enables you to change the properties for the control, which in turn influ- 
ences the way the control looks and behaves at run time. 


Buttonl System.Web.UI.WebConlrals.Button 

[a[]5* [Uf > 

CssClass 
B Font 
ForeColor 

^^^^^^^^^^1 Button 
B Behavior 

CausesValidation True 
Text 

The text to be shown on the button. 


FIGURE 4-2 


5. Set the control's Text property to submit information and set its ID (which you'll find all the 
way down at the bottom of the list wrapped in parentheses) to submiteutton. 

6. Change the id of the TextBox to YourName using the Properties Grid. 
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7. Clear the Text property of the Label using the Properties Grid. You can right-clicl< the property's 
label in the grid and choose Reset, or you can remove the text manually. Set its id to Result. 

8. Still in Design View, double-click the Button control to haveVS add some code to the Code 
Behind of the page that will be fired when the button isclicl<ed in the browser. You see later how 
to accomplish the same thing from M arl<up View. Add the bolded line of code to the code block 
that VS inserted for you: 

VB.NET 

Protected Sub SubmitButton_Click (sender As Object, 

e As EventArgs) Handles SubmitButton. Click 
Result. Text = "Your name is " & YourName . Text 

End Sub 

C# 

protected void SubmitButton_Click (object sender, EventArgs e) 
{ 

Result. Text = "Your name is " + YourName . Text ; 

} 

N otethat theVB.N ET example doesn't need an underscore hereto split the code over two lines. 
In older versions of V B.N ET, the underscore was required to split this code over two lines. 

9. Save the changes to the page and then open it in the browser by pressing Ctrl4f 5. Don't click the 
button yet, but open up the source of the page by right-clicking the page in the browser and choos- 
ing View Source or View Page Source. You should see the following HTML code (I changed the 
formatting slightly so the H TM L fits on the page): 

<div> 

Your name <input name= "YourName" type="text" id= "YourName" /> 
<input type="submit" name=" SubmitButton" value="Submit Information" 
id="SubmitButton" /> 

<br /> 

<span id="Result" ></span> 
</div> 

10. Switch back to your browser, fill in your name in the text box, and click the button. W hen the page 
is done reloading, open up the source for the page in the browser again using the browser's right- 
click menu. The code should now look like this: 

<div> 

Your name <input name =" YourName" type="text" value="Imar" id=" YourName" /> 

<input type="submit" name=" SubmitButton" value="Submit Information" 
id= "SubmitButton" /> 

<br /> 

<span id="Result">Your name is Imar</span> 

</div> 


N otethat the two bold lines have changed, and now show the name you entered in the text box. 
You can ignore the other HTM L in the page for now. 
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How It Works 

As its name implies, an ASP.N ET Server Control lives on the server in your ASPX page where it can be 
processed by the ASP.N ET run time. W hen you request a page in the browser, the run time creates an 
in-memory representation of theASPX filewith the controls you created. When the run time is about to 
send the H TM L to the browser, it asl<s each of the controls in the page for their HTML, which is then 
injected in the final response. For example, when the Label control is asl<ed for its H TM L the first time 
it loads, it returns thefollowing: 

<span id="Result" ></span> 

Although you defined the Label control with the <asp: Label > syntax, it ends up as a simple <span> 
element in the browser. Because the Text property of the Label control is empty, you don't see any 
text between the two <span> tags. The same applies to other controls; an <asp:TextBox> ends up as 

<input type="text">, Whereasthe <asp:Button> endS up as <input type = " submit ">. 

W hen you clicl< the button, the control causes a postbacl<, which sends the information for the controls 
in the page to the server, where the page is loaded again. Additionally, the code that you wrote to han- 
dle the button's Click event is executed. This code tal<es the name you entered in the text box and then 
assigns it to theLabei control as shown in this C#example: 

Result. Text = "Your name is " + YourName . Text ; 

Don't worry about the syntax for the code that handles the button's ciick event for now. In Chapter 5, 
you see how this worl<s, and why you need this code. 

At this stage, the Label control contains the text you entered in the text box, so when it is asl<ed for its 
H TM L, it now returns this: 

<span id="Result" >Your name is Imar</span> 


You get a more in-depth look at postbacl<s later in this chapter when the ASP.N ET state engine is 
discussed. 


A CLOSER LOOK AT ASP.NET SERVER CONTROLS 

Because you'll be working with server controls most of the time when building your ASP.N ET Web 
Forms pages, you need to know in detail how they work and how to use them. In the next section, 
you see how to add the controls to your pages and change the way they behave in the browser. In the 
section that follows, you get an overview of the behavior that all server controls have in common. 
Once you understand this shared behavior, it's easy to apply this knowledge to other, new controls 
as well, enabling you to get up to speed with them very quickly. 

Defining Controls in Your Pages 

As demonstrated in the previous Try It 0 ut, you can simply drag controls from theToolbox onto the 
design surface of the page. This makes it very easy to add a bunch of controls to a page to get you 
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started. H owever, because of the way the design surface works, it's sometimes difficult to add them 
exactly where you want them. For example, it can be difficult to drag a control between the opening 
and closing tags of an H TM L element. Fortunately, you can just as easily drag a control from the 
Toolbox in M arl<up View. Additionally, you can also type the control's markup directly in M arkup 
View, letting Intel 11 Sense and code snippets help you with the different tags and attributes. You'll 
also find that the Properties G rid works in M arkup View. Simply click the relevant markup, and the 
Properties Grid is updated to reflect the tag you clicked. This makes it easy to change the properties 
of the control, while you can still see exactly what markup gets generated for you. If you've worked 
with older versions of VS, you'll appreciate one great new feature in VS2012: you can now bind 
handlers (such as the click event used in the preceding exercise) directly in M arkup View without 
switching to Design View. You'll also be able to access the Smart Tasks panel for the controls from 
code. You see more of these features later in this chapter. 

If you look at the Properties G rid for some of the controls in a page, you'll notice that many of them 
have similar properties. In the next section, you see exactly what these properties are and what they 
are used for. 

Common Properties for All Controls 

M ost of the server controlsyou find in theVSToolbox share some common behavior. Part of this 
behavior includes the so-called properties that define the data a control can contain and expose. You 
learn more about properties and other behavior types in the next chapter. Each server control has an 
ID to uniquely identify it in the page, a runat attribute that is always set to server to indicate the 
control should be processed on the server, and a ciientiD that contains the client-side ID attribute 
that is assigned to the element in the final HTM L. In versions of ASP. N ET up to 3.5 this ciientiD 
was always generated for you automatically. H owever, in ASP.N ET 4 a new ciientiDMode property 
was introduced that gives you more control over the ID of an element at the client. You see how this 
works in later chapters. The runat attribute is technically not a property of a server control, but is 
necessary to indicate that the markup for the control should be processed as a server control and not 
end up as plaintext or H TM L in the browser. 

Besides these properties, many of the server controls share more properties because they share the 
same Control base class. The next chapter digs deeper into base classes and inheritance. The fol- 
lowing table lists the most common shared properties and describes what they are used for. 


PROPERTY 

DESCRIPTION 

AccessKey 

Enables you to set a key with which a control can be accessed at the client by 
pressing the associated letter. 

BackColor 
ForeColor 

Enables you to change the color of the background (BackColor) and text 
(ForeColor) of the control. 

BorderColor 
BorderStyle 
BorderWidth 

Changes the border of the control in the browser. The similarities with the CSS 
border properties you saw in the previous chapter are no coincidence. Each of 
these three ASP.NET properties maps directly to its CSS counterpart. 


continues 
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(continued) 


PROPERTY 

DESCRIPTION ^11111111^1 

CssClass 

Enables you to define the HTML class attribute for the control in the browser. 
This class name could then point to a CSS class you defined in the page or an 
external CSS file. 

Enabled 

Determines whether the user can interact with the control in the browser. For 
example, with a disabled text box (Enabled=" False") you cannot change its 
text. 

Font 

Enables you to define different font-related settings, such as size, family and 
whether or not the font should be bold. 

Height 
Width 

Determines the height and width of the control in the browser. 

Tablndex 

Sets the client-side HTML tabindex attribute that determines the order in which 
users can move through the controls in the page by pressing the Tab key. 

ToolTip 

Enables you to set a tooltip for the control in the browser. This tooltip, rendered 
as a title attribute in the HTML, is shown when the user hovers the mouse 
over the element. 

Visible 

Determines whether or not the control is sent to the browser. You should really 
see this as a server-side visibility setting because an invisible control is never 
sent to the browser at all. This means it's quite different from the CSS display 
and visibility properties you saw in the previous chapter that hide the ele- 
ment at the client. 


To see how all these attributes end up in the browser, consider thefollowing markup for a TextBox 
server control: 

<asp:TextBox AccessKey="a" BackColor="Black" ForeColor= "White" Font-Size="30px" 
BorderColor= "Yellow" BorderStyle= "Dashed" BorderWidth="4" CssClass="TextBox" 
Enabled="True" Height="40" Width="200" Tablndex="l" ToolTip= "Hover text here" 
Visible="True" ID="TextBoxl" runat=" server" Text="Hello World"> 

< /asp : TextBox> 

When you request the page with thiscontrol in the browser, you end up with thefollowing HTM L: 

<input name="TextBoxl" type="text" value="Hello World" id="TextBoxl" accesskey="a" 
tabindex="l" title="Hover text here" class="TextBox" style="color : White; 
background- color : Black; border -color : Yel low; border- width : 4px; 
border- style : Dashed; font -size : 3 Opx; height : 4 0px; width: 200px; " 


This results in the text box shown in Figure4-3. 
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FIGURE 4-3 


N otethat most of the server-side control properties liave been converted into CSS inline styles witli 
the style attribute. 

W hen building websites, it's quite uncommon to define a TextBox in this manner. As you learned 
in the previous chapter, you should avoid inline styles as much as possible, and opt for external 
cascading style sheets instead. You can accomplish the exact same behavior with this server-side 
control: 

<asp:TextBox ID="TextBoxl" AccessKey="a" CssClass="TextBox" Tablndex= " 1 " 

ToolTip=" Hover text here" runat=" server" Text="Hello World" > 
< /asp : TextBox> 

And the following CSS class: 

. TextBox 
{ 

background- color : Black; 
color: White; 
font-size: 30px; 
border-color: Yellow; 
border-style: Dashed; 
border-width: 4px; 
height: 4 0px; 
width: 2 00px; 

} 

Obviously, the second example is much easier to read, reuse, and maintain. If you want another text 
box with the exact same look, you simply assign TextBox to the cssciass of that control. Also, 
notice I left out the Enabled and visible properties. Both default to True, so there's no need to 
explicitly state that in the control declaration. 

Although it's recommended to use CSS classes instead of these inline styles, it's good to l<now about 
the server-side control properties in case you need fine control over them. If you change the control's 
properties programmatically (as you learn how to do later), they still end up as inline styles, and 
thus possibly override settings in embedded or external style sheets. 
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N ow that you have seen the generic behavior that ail server controls share, it's time to iooi< at the 
iarge number of controls that ship with ASP.N ET 4.5. 


TYPES OF CONTROLS 

Out of the box, ASP.N ET 4.5 comes with a large number of server controls, supporting most of 
your web development needs. To make it easy for you to find the right controls, they have been 
placed in separate control categories in the VS Toolbox (accessible by pressing Ctrl+Alt+X ). Figure 
4-4 shows theToolbox with all the available categories. 

N ote that depending on your version of Visual Studio, you may have other categories as well. 

A handy new feature in VS 2012 is the ability to search in theToolbox. Just type in a few letters of 
the control you're looking for in the Search text box at the top of the control, and VS filters the list 
with controls matching your criteria. 

In the following sections, you seethe controls in each category and the tasks for which they are 
designed. 

With the discussion of the various controls, you see a mention of the properties of a control. For 
example, a Texteox has a Text property (among many others), and a ListBox has a seiecteditem 
property. Some properties can only be set programmatically and not with the Properties Grid. 
Reading and changing control properties programmatically is discussed in detail in the next 
chapter. 

Standard Controls 

The Standard category contains many of the basic controls that almost any web page needs. You've 
already seen some of them, like the Texteox, Button, and Label controls earlier in this chapter. 
Figure 4-5 shows all the controls in the Standard category. 

M any of the controls probably speak for themselves, so instead of giving you a detailed description 
of them all, the following sections briefly highlight a few important ones. 

Simple Controls 

TheToolbox contains a number of simple and straightforward controls, including xextBox, 

Button, Label, HyperLink, RadioButton, and CheckBox. Their iCOnsin theToolbOX giveyOU a 

good clue as to how they end up in the browser. In the remainder of this book, you see these con- 
trols used many times. InASP.NET 4.5 the TextMode property ofthexextBox control has been 
expanded to support new HTM L5 types such asoateTime, Email, and Number. You see more about 
this later in the book. 


Types of Controls | 117 


Toolbox □ 

X 

Search Toolbox f' 

) , 

t> Standard 

/\ 

> Data 

I 

■ 

> Validation 


> Navigation 

_ 

> Login 


> WebParts 


> AJ/W Extensions 


> Dynamic Data 


> HTML 


> HTML Fragments 


^ General 

V 


FIGURE 4-4 


Toolbo 

X 

□ X 

Search Toolbox 

P • 

A Standard 





@!0 

Ad Rotator 



BulletedList 


EE! 

Button 


1^ 

C aisndar 



v^necKDOx 



f~h&/-L'Di-ivl iet 
V,ncCKDOXLISl 


IS 

DropD own List 


u 




niUUCMrLCIU 


A, 

HypcrLink 


Ca 

Image 


ICS 

JmdGCDUtton 





A 

Label 


@ 

LInkButton 






LiteraT 



Localize 


liP 

MultiView 


n 

Panel 



Placeholder 


© 

RadioButton 



RadioButtonList 



Substitution 


m 

Table 



TextBox 



View 


** 

Wizard 



Xml 



FIGURE 4-5 


List Controls 

The standard category also contains a number of controls that present themselves as lists In the 
browser. These controlslncludeListBox, DropDownList, checkBoxList, RadioButtonList, and 
BulletedList. To add Items to the list, you define <asp:Listitem> elements between the opening 
and closing tags of the control, as shown In thefollowing example: 

<asp: DropDownList ID="FavoriteLanguage" runat=" server" > 
<asp : List I tern Value="C#" >C#</asp : Listltem> 

<asp:ListItem Value="Visual Basic" >Visual Basic</asp : Listltem> 
<asp : List I tern Value= "CSS " >CSS</asp : Listltem> 
< /asp : DropDownList > 
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TheDropDownList enables a user to select only one item at a time. To seethe currently active and 
selected item of a list control programmatically, you can look at its seiectedvaiue, seiecteditem, 
or seiectedindex properties, seiectedvalue retums a String that contains the value for the 
selected item, lil<e c# or visual Basic in the preceding example, seiectedmdex returns the 
zero-based index of the item in the list. W ith the preceding example, if the user had chosen C#, 
Seiectedindex would be 0. Similarly, if theuser had chosen CSS, theindex would be2 (the third 
item in the list). 

For controls that allow multiple selections (lil<e checkBoxList and ListBox), you can loop through 
the Items collection and see what items are selected. In this case, seiecteditem returns only the 
first selected item in the list; not all of them. You learn how to access all the selected items in the 
next exercise. N ote that in the browser, both theDropDownList and theListBox control render as 
a <seiect> element. Attributes such as size and multiple set by these two controls determine the 
appearance and behavior of the H TM L element in the browser. 

The BuiietedList control doesn't allow a user to make selections, and as such doesn't support 
these properties. 

To see how to add list items to your list control, and how to read the selected values, the following 
exercise guides you through creating a simpleWeb Form with two list controls that ask users for 
their favorite programming language. 


TRY IT OUT 


Working with List Controls 


In this exercise you add two list controls to a page. Additionally, you add a button that, when clicked, 
displays the selected items as text in a Label control. 

1. In the Demos folder, createa new Web Form called Listcontrois.aspx. M akesureyou createa 
Code Behind file by checking the Place Code in Separate File option. 

2. Switch to Design View and drag a oropDownList from theToolbox onto the design surface of the 
page within the dashed border of the <div> element that is already present in your page. 

3. Notice that as soon as you drop the 
DropDownList control on the page, a pop-up 
menu appears that is labeled DropDownList 
Tasks, as shown in Figure 4-6. 

This pop-up menu is called the Smart Tasks 
panel . W hen it appears, it gives you access to 
the most common tasks of the control it belongs 
to. I n the case of the DropDownList, you get 
three options. The first option enables you 
to bind the control to a data source, which is 
demonstrated in Chapter 13. The second item 
enables you to manually add items to the list, and the last option sets the AutoPostBack property 
of thecontrol. With thisoption checked, the control submits the page in which it iscontained 
back to the server as soon as the user chooses a new item from the list. N ote that the browser 
must haveJavaScript enabled for this to work. 
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The Smart Tasks panel appears only for the more complex controls that have a lot of features. 
You won't see it for simple controls like Button or Label. To reopen the Smart Tasks panel, 
right-click the control in the designer and choose Show Smart Tag. Alternatively, click the small 
arrow at the top-right corner of the control, visible in Figure 4-6, or press Shift-f-Alt-ff 10 when 
the control is selected. You can also open the Smart Tasks panel from markup view. Simply click 
anywhere on the opening or closing tag of a control or other piece of markup and press Ctrl-fOot 
(Ctrl 4-.). Alternatively, hover over the tiny blue rectangle at the start of the opening tag and then 
click the grey arrow that appears. 

0 n the Smart Tasks panel of theoropDownList, click the Edit Items link to bring up the Listltem 
Collection Editor, shown in Figure 4-7. 
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Thisdialog box enables you to add new items to the list control. Theitemsyou add through this 
window are added as <asp:Listitem> elements between the tags for the control. 

4, Click the Add button on the left side of the screen to insert a new list item. Then in the Properties 
Grid on the right, enter C#for the Text property and press Tab. As soon as you tab away from 
the Text property, the value is copied to thevaiue property as well. This isconvenient if you want 
both the Text and the value property to be the same. H owever, it's perfectly 0 K (and quite com- 
mon) to assign a different value to thevaiue property. 
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5. Repeat step 4 twice, this time creating iist items for Visual Basic and CSS You can usetlie up and 
down arrow buttons in tlie middle of tlie dialog box to change the order of the items in the list. 
Finally, clicl< OK to insert the items in the page. You should end up with the following code in 

M arl<up View: 

<asp : DropDownList ID="DropDownListl" runat= " server " > 

<asp : List Item>C#< /asp : Listltem> 

<asp : Listltem>visual Basic</asp : Listltem> 

<asp : ListItem>CSS</asp :ListItem> 
</asp : DropDownList> 

6. In M arl<up View drag a checksoxList control from theToolbox directly into the code window, 

right after the DropDownList. 

7. Copy the three <asp:Listitem> elements from the DropDownList you created in steps 4 and 5 
and paste them between the opening and closing tags of the checkBoxList. You should end up 
with this code: 

<asp : ListItem>CSS</asp :ListItem> 
</asp : DropDownList> 

<asp: CheckBoxList ID= " CheckBoxListl " runat= " server " > 

<asp: ListItem>C#</asp: Listltem> 

<asp: ListItem>Visual Basic</asp:ListItem> 

<asp: ListItem>CSS</asp: Listltem> 
</asp :CheckBoxList> 

8. Switch to Design View and drag a Button from theToolbox in Design View to the right of the 

CheckBoxList COntrol. The Button Will be placed below the checkBoxList. N ext, drag a Label 

control and drop it to the right of the Button. C reate some room between the Button and the 
Label by positioning your cursor between the controls and then pressing Enter twice. Double-clicl< 
the Button to open the Code Behind of the page. 

9. In the code block that VS added for you, add the following bolded code, which will be executed 
when the user clicl<s the button: 

VB.NET 

Protected Sub Buttonl_Click (sender As Object, e As EventArgs) _ 
Handles Buttonl . Click 
Labell.Text = "In the DDL you selected " & 

DropDownListl . SelectedValue & "<br />" 

For Each item As Listltem In CheckBoxListl . Items 
If item. Selected = True Then 

Labell.Text &= "In the CBL you selected " & item. Value & "<br />" 
End If 
Next 
End Sub 

C# 

protected void Buttonl_Click (object sender, EventArgs e) 
{ 

Labell.Text = "In the DDL you selected " + 
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DropDownListl . SelectedValue + "<br />"; 


} 


foreach (Listltem item in CheckBoxListl . Items) 
{ 

if (item. Selected == true) 
{ 

Labell.Text += "In the CBL you selected " + item. Value + "<br />"; 

} 

} 


Notice how in tlieVB.N ET code tlie underscore is needed to split tlie code over two lines. 
VB.N ET requires the underscore if you want to move the Handles l<eyword to its own line. 

10. Save the changes to the page and then request it in the browser. Choose an item from the 

DropDownList, check oneor more items in the checkBoxList, and clicl< the button. You should 
see something similar to Figure 4-8, which shows the page in Firefox. 
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How It Works 

The various list controls all use <asp:Listitem> elements. That mal<es it easy to reuse them by copying 
them from one control to another. Because the DropDownList supports only one selected item at a time, 
it's pretty easy to get its selected value. All it tal<es is a single line of code (shown in C#): 

Labell.Text = "In the DDL you selected " + DropDownListl . SelectedValue + "<br />"; 
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T he checkBoxList control enables a user to select multiple items at once. T herefore, you need a bit 
more code to loop over the collection of items, checl<ing the selected property of each item (again 
shown in C#): 

foreach {Listltem item in CheckBoxListl . Items) 
{ 

if ( item. Selected == true) 
{ 

Labell.Text += "In the CBL you selected " + item. Value + "<br />"; 

} 

} 

The CheckBoxList and the other list controls have an items collection that contains all the items you 
defined in the code. So, given the code from this Try It 0 ut, CheckBoxList i contains three items, for 
C#, Visual Basic, and CSS, respectively. Each Listitem in turn contains a selected property that 
determines whether or not the user has checl<ed the item in the list. 

Using a foreach loop (For Each in VB.N ET), you can iterate over the collection of Listitem elements, 
testing the selected property one by one. If the item was selected in the list, its selected property 
is true (True in VB) and its Value is appended to the text of the Label. N otice the use of += (&= in 
VB.N ET) in the last code example to assign the value of the list item together with the text to the 
Label control's Text property. The += and &= syntax is shorthand for this: 

Labell.Text = Labell.Text + "In the CBL you selected" + item. Value + "<br />"; 

Thiscodetakesthecurrenttextfrom theLabel control, appendstheliteral text "in the cbl you 
selected" to it, then appends the value of the item using item, value and finally appends the literal 
text "<br />". It then reassigns the entire string bacl< to the Text property of the label. Using the += 
syntax is often a bit easier to write and understand, but the longer version is common as well. 

Both VB.N ET and C# have support for a for each loop, although both languages use a slightly different 
syntax. In the next chapter, you learn a lot more about looping and other language constructs. 

Also of note is the way the List items are set up. In the first example, before the Try It 0 ut, you saw 
Listltem elements with both a value and text: 

<asp : Listltem Value="C#" >C#</asp :ListItem> 

<asp : Listltem Value= "Visual Basic" >Visual Basic</asp : Listltem> 
<asp: Listltem Value="CSS" >CSS</asp : Listltem> 

W hen you add items to the list yourself with the Listltem Collection Editor, you don't get the value 
attributes: 

<asp:ListItem>C#</asp : Listltem> 
<asp:ListItem>Visual Basic < /asp : Listltem> 
<asp : ListItem>CSS</asp : Listltem> 

You didn't get the value attribute because you didn't supply an explicit valuefor the item in the 
Listltem Collection Editor. If you omit the value, the text between the opening and closing tags of 
the Listltem is used implicitly as the value, which is fine in many cases. H owever, it's also quite com- 
mon to have a different value and Text property in the list. For example, when you have a list with 
countries, you could use the full name of the country as the Text (lil<eThe Netherlands) and use the 
official country code (ni) as the value for the drop-down list. You see the list controls at work in other 
chapters in this book. 
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Container Controls 

Q uite often it's desirable to group related content and controls. You can do this by putting the 
controls (and other markup) in one of the container controls, lil<e the panei, the piaceHoider, the 
Muitiview, or the Wizard. For example, you can use the piaceHoider or the panei control to hide 
or show a number of controls at once. Instead of hiding each control separately, you simply hide the 
entire container that contains all the individual controls and marl<up. Both of these controls have 
their own advantages and disadvantages. The good thing about the piaceHoider control is that it 
emits no H TM L of its own into the page, so you can use it as a container without any side effects in 
the final page. H owever, it lacks design-time support, making it hard to manage the controls inside 
the PiaceHoider at design time in VS. In contrast, the Panei enables you to easily access all con- 
trols and other content it contains but renders itself as a <div> element. In many cases this isn't a 
problem, and can even be useful as you can target that div using CSS at the client, so usually you're 
best off with the panei control because of its design-time support. 

The Muitiview (which can contain one or more <asp:view> elements) and the wizard are similar 
in that they enableyou to split up a long page into multiple areas, making it easy to fill in a long 
form, for example. Thewizard has built-in support for moving from page to page using Previous, 
N ext, and Finish buttons, whereas the Muitiview must be controlled programmatically. 

A Closer Look at the Panel Control 

In the following exercise, you use a panei control to create a container for other controls and 
markup. You only add some text for now, but in a subsequent Try It 0 ut exercise you add ASP.N ET 
controls to the panel. 


||j|yHj|2^Q Using the Panel Control 

In this exercise you see how to use the panei control as a container for some simple text. In addition, 
you use a checkBox to control the visibility of the panei at the server. 

1. Start by creating a new Web Form with Code Behind called containers. aspx in the Demos folder. 

2. Switch the page into Design View and drag a checkBox and a panei control from theToolbox on 
the design surface into the dashed <div> element. 

3. Give the checksox control a meaningful description by setting its Text property to show panei 
and set its AutoPostBack property to True using the Properties Grid. Rather than choosing True 
from the drop-down list for the property, you can also double-click theAutoPostsack property or 
its value to toggle between False and True. 

4. Set the visible property of the panei control to False using the Properties Grid. This hides the 
Panel control When the page first loads. 

5. Insidethe Panel control, type some text (for example, I am visible now). N ote that the panel 
behaves like the rest of VS's design surface. You can simply add text to it, select and format it, and 
add new controls to it by dragging them from theToolbox. The code for the panel should end up 
like this in M arkup View: 

<asp:Panel ID="Panell" runat=" server" Visible="False" > 

I am visible now 
</asp : Panel > 
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6. If necessary, switch to Markup View and locate tine code for tine checkBox. Position your cursor 
right before the closing forward slash (/) and type On, followed by Ctrl+Space. This brings up 
IntelliSense, as shown in Figure 4-9. 
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Select oncheckchanged by pressing Tab or Enter. N ext, type an equals sign (^, which brings up 
IntelliSense again as shown in Figure 4-10. N ote that if you're using C#, you may also see a page 
Load item in the list of event handlers. 


<asp:CheckBox ID="CheckBoxl" runat="server" AutoPostBack="True" 

Text="Show Panel" OnCheckedChanged= 

t/> 

<asp: Panel ID="Panell" runat="server" 
I am visible now</asp:Panel> 

f < Create New Event> 



FIGURE 4-10 


Select the <Create N ew Event>item and press Tab. VS completes the code as follows: 

OnCheckedChanged= " CheckBoxl_CheckedChanged" 

Although this auto-completion is nice, VS has done something else that's much more useful: when 
you pressed Tab, it also added the handler code for you in the Code Behind. To see that code, 
press F 7 to switch to CodeView. 


NOTE I have wanted this feature since the very first version of Visual Studio for 
.NET, and I am really glad It has been added. With this new feature, the need 
to switch to Design View and set up the handler by double-clicking a control 
(as you did in an earlier exercise) or using the Events tab of the Properties Grid 
(as you see later) has been greatly reduced. This is great for people who prefer 
hand-coding over the Design View and is especially useful in more complex 
pages where Design View Isn't that useful anyway. 
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N otethat there is a subtle difference between adding tlie liandier using M ari<up View and Design 
View if you're using V B.N ET. If you use M ari<up View, tiie liandier is added to tiie mari<up 

(OnCheckedChanged="CheckBoxl_CheckedChanged") and COde iS added tO tiieCode Beilind. 

Wiien you useDesign View, tiiecodein M ari<up View isnot affected, and tiiecodein tlieCode 
Beiiind isannotated witii tiie Handles i<eyword to indicate wiiicli event (for instance, tlieciici< on 
a button, tlieclieci< ciianged event of a clieci< box, and so on) tlie code responds to. At run time, 
iiowever, tiiere is no difference. 

7. N ext, add tliefoiiowing boided line witiiin the handler code that VS added for you: 

VB.NET 

Protected Sub CheckBoxl_CheckedChanged (sender As Object, e As EventArgs) 
Panell .Visible = CheckBoxl. Checked 

End Sub 

C# 

protected void CheckBoxl_CheckedChanged (obj ect sender, EventArgs e) 
{ 

Panell .Visible = CheckBoxl .Checked; 

} 

8. Save all your changes and then request the page in the browser by pressing Ctrl4f 5. 

9. When the page first loads, all you see is the checl< box and the text beside it. When you look at 
the HTM L for the page in the browser (right-clicl< the page and choose View Source or View Page 
Source depending on your browser), you'll only seethechecl< box; there's no code for the panei 
control at this stage sent to the browser. W hen you clicl< the check box to place a checkmark in it, 
the page reloads and now shows the text you entered in step 5. 


WARNING If nothing happens, go back to the source of the page in VS and 
ensure that AutoPosteack is set to True on the checkeox control. 


If you look at the H TM L in the browser, you'll see that the text you typed in step 5 is wrapped in 
a <div> element with an id of paneii; 

<div id=" Panell "> 

I am visible now 
</div> 

How It Works 

In step 4 of this exercise you set the visible property of the panei control to False. This means that 
when the page loads, the control is not visible on the server and thus its H TM L never makes it to the 
browser. W hen you then check the check box, a postback occurs, which sends the information con- 
tained in the form to the server. At the server, some code is run that is fired whenever the check box 
changes its state from checked to unchecked or vice versa. Inside that code block, the following code is 
executed (shown in C#): 

Panell .visible = CheckBoxl . Checked; 
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This means that the panei is only visible when the checl< box is checl<ed. W hen it isn't, the panei is 
hidden automatically. 


As you can see, it's easy to add text and other marl<up to the panei control in VS. Right now, you 
only added some plaintext, but in the next section you see how to add a wizard control and how to 
use it. 

Magic with the Wizard Control 

Thewizard control is a great tool for breaking apart large Web Forms and presenting them as bite- 
sized chunks of information to the user. Instead of confusing your user with one page with many con- 
trols and text on it, you can break the page apart and present each section on a separate wizard page. 
Thewizard control then handles all navigation issues by creating N ext. Previous, and Finish buttons 
automatically. In the following exercise you usea wizard to ask a user for her name and favorite 
programming language. Although theexampleitself is pretty trivial, and you could have placed both 
questions on the same page without confusing the user, the example shows how thewizard works and 
why it'suseful. You can easily apply the same techniques to your own, possibly larger, Web Forms. 


TRY IT OUT 


Using the Wizard to Create Easy-to-Use Forms 


In this Try It Out, you place a wizard inside the panel you created in the previous exercise that enables 
a user to fill in a form that is spread over a couple of pages. The wizard will have two steps where a 
user can enter details, and a results page that shows the data the user has provided. 

1. M akesureyou still have containers .aspx pageopen in Design View. Remove the text "I am vis- 
ible now" that you entered in the previous Try It Out, and then drag a wizard control from the 
Toolbox inside the panei. Drag its right edge further to the right, increasing the total width of the 
control to soopx. Y our page now looks similar to Figure 4-11. 

2. 0 pen the wizard's Smart Tasks panel (click the arrow in its upper right-hand corner) and choose 
Add/Remove WizardSteps. In the dialog box that follows, click the Add button to insert a third 
wizard step, shown in Figure 4-12. 
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3. Click the first wizardstep labeled Step 1 in the M embers list on the left and change its Title from 

Step 1 to About You. Set the Title of the other two steps to Favorite Language and Ready, 

respectively. 

4. C hange the stepType of the second step (now labeled Favorite Language) to Finish, and of the 
last step to Complete. You Can leave the stepType of the first step set to Auto. Click OK to close 
the WizardStep Collection Editor. 

5. In Design View, click About You in the list at the left to make it the active step and drag a Label 
and a TextBox to the right side of the wizard. Y ou need to drag them inside the gray rectangle 
that's in the upper-right corner of the wizard, or the controls won't end up inside the wizard. 

Set the Text property of the Label to Type your name and change the id of the TextBox to 

YourName. W hen you're done, your wizard looks like Figure 4-13. 

6. Click the Favorite Language item in the list on the left to make it the active step. Add a 
DropDownList to the rectangle With the gray border on the right part of the wizard step. Rename 
theoropDownList by Setting its ID to FavoriteLanguage. Open the Smart Tasks panel of the 
DropDownList control and choose Edit Items. Add the same three items you added in an earlier 
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Try It Out: for C#, Visual Basic, and CSS, respectively. If you want, you can copy the three items 
from the page Listcontrois .aspx and paste them between the <asp:DropDownList> tags inside 
the second step. You should end up with the following code for the second step: 

< /asp : wizards tep> 

<asp:WizardStep runat=" server" Title="Favorite Language" StepType= "Finish" > 
<asp:DropDovmList ID=" Favor iteLanguage" runat=" server "> 
<asp:ListItem>C#</asp:ListItem> 
<asp:ListItem>Visual Basic</asp:ListItem> 
<asp:ListItem>CSS</asp :ListItem> 
</asp:DropDovmList> 
</asp :WizardStep> 

<asp :WizardStep runat=" server" StepType=" Complete" Title= "Ready" > 


Containers. aspx* 


I body I 

|~ Show Panel 

About You 

Favorite Language 
i Ready 


Type your name 


Next 


ti Design o Split | <> Source 1 <WizardSteps> <asp:WizardStep> <asp;TextBox#YourName> [►] 


FIGURE 4-13 


For the final step, switch to M arkup View. If you try to switch to the last step in Design View, you 
may notice that the wizard disappears. If that happens, switch to Marl<upView and set 
Activestepindex to 0 again on the opening tag of the wizard control. 

Insidethe last wizardstep labeled Ready, drag a label control from theToolbox and rename it 
by setting its id to Result. Alternatively, insidethe code for the last step, type the word labei 
and then press Tab to execute a code snippet for inserting a Label. Then add the id attribute 
manually. 


8. Double-clicl< the wizard in Design View and add the 
following bolded code, which will be executed when the 
user clicl<s the Finish button on the last step of the wizard. If 
you're having problems getting VS to create the correct code 
for you, as you see it in the next snippet, select the wizard, 
press F4 to open up the control's Properties Grid, and then 
clicl< the button with the lightning bolt on it (the fourth but- 
ton from the left on the toolbar of the Properties Grid), as 
shown in Figure 4-14. 

This part of the Properties Grid is often referred to as the 
Events tab of the Properties Grid. Locate and double-clicl< 


Wizardl System.Web.UI.WebControls.Wizard 

B Action 

ActiveStepChanged 
CancelButtonClick 


FinishButtonClick 


NextButtonClick 
PreviousButtonClick 

FinishB uttonClkk 

Fires when the finish button is clicked. 


0 


FIGURE 4-14 
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FinishButtonciick in theAction Category. With botli metliods, you sliouid end up witli some 
code for wizardi_FinishButtonciick tliat you need to extend witli tliefoiiowing code: 

VB.NET 

Protected Sub Wizardl_FinishButtonClick (sender As Object, 

e As WizardNavigationEventArgs) Handles Wizardl . FinishButtonClick 
Result. Text = "Your name is " & YourName . Text 
Result. Text &= "<br />Your favorite language is " & 
Favor iteLanguage . SelectedValue 

End Sub 


C# 

protected void Wizardl_FinishButtonClick (obj ect sender, 
WizardNavigationEventArgs e) 

{ 

Result. Text = "Your name is " + YourName . Text ; 
Result. Text += "<br />Your favorite language is " + 
Favor iteLanguage. SelectedValue; 

} 

9. Switcli baci< to Design View and open tlie Properties Grid for tlie wizard and mai<esure its 
Activestepindex is Set to 0. Tlie designer remembers tlie last step you designed and stores the 
value in the Activestepindex of the Wizard in M arl<up View. To mal<e sure the wizard starts on 
the first page, you should always set the Activestepindex bacl< to o (or clicl< the first step in the 
wizard control in Design View) before you save your changes and run the page. 

10. Save all changes, close all open browser windows, and press Ctrl4f 5 to open the page in the 
browser. Select the check box to mal<ethe panei visible and enter your name on the first wizard 
page. Clicl< N ext and choose your favorite programming language. N otice how there's now a 
Previous button available that enables you to go back to the first step of the wizard if you want to 
change your name. Instead of clicking the N ext and Previous buttons, you can also click the links 
on the left of the wizard in the browser. When you click the Finish button, you'll seethe results of 
the information you entered in the wizard (see Figure 4-15). 



[.J http;//localhost;49...mos/Container5.aspx [ + 
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FIGURE 4-15 
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How It Works 

The wizard control takes care of most of the hard work for you. It handles the navigation, determines 
when to show the correct buttons (N ext, Previous, and Finish), and ensures that in the resulting page 
the values for the controls you added in thewizard steps are still availableso you can show them with 
the label. It does this with a concept called View State, something you learn more about toward the end 
of this chapter. 

All you have to do is define the steps and set their stepType. You set the stepType of the first step to 
Auto. W ith this setting, thewizard figures out what buttons to show. Because it's the first step in the 
wizard and there's no previous step to go to, it leaves out the Previous button (this is the equivalent of 
setting the StepType to start manually.) You set the stepType of the second step to Finish, which tells 
thewizard to draw a Previous button and a Finish button. W hen you click the Finish button, thewizard 
arrives at the last step with its stepType set to complete. 0 n this step, the navigation buttons are hid- 
den, and all you see is the label with the result, which was assigned with the code in the Code Behind of 
the page. In Chapter 5, you learn more about the code in the Code Behind that makes this possible. 


In addition to the controls you have seen in the previous sections, a few other controls are worth 
examining. N ot all of them are discussed here in detail because they aren't used any further in 
this book. A good sourceof information about these controls isthe M icrosoft Developer N etwork 
(M SDN ) site at http://msdn .microsoft . com. To find information about controls on this site, use 
your favorite search engineand then search for ControlN ameControl M SDN . For example, to find 
more information on thewizard control you'd search for wizard control msdn. Typically, the 
M SDN site is at the top of the search results. 

Other Standard Controls 

This section briefly discusses the remainder of the controls in the Standard category of the Toolbox. 
You see many of them used in the sample application in the rest of the book. 

LinkButton and ImageButton 

The LinkButton and the TmageButton controls Operate similarly to an ordinary Button control. 
Both of them cause a postback to the server when they are clicked. The LinkButton presents itself 
as a simple <a> element, but posts back (using JavaScript) instead of requesting a new page. The 
TmageButton does the same, but displays an image that theuser can click to trigger the postback. 

Image and ImageMap 

These controls are pretty similar in that they display an image in the browser. The TmageMap enables 
you to define hotspots on the image that, when dicked, either cause a postback to the server or navi- 
gate to a different page. 

Calendar 

The Calendar control presents a rich interface that enables a user to select a date. You see more of it 
toward the end of this chapter when theASP.N ET state engine is discussed. 
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FileUpload 

The Fileupioad control enables a user to upload files that can be stored on the server. You see more 
of this control in Chapter 14. 

Literal, Localize, and Substitute 

All three controls look a little like the Label control because they can all display static text or 
HTM L. The biggest advantage of the Literal is that it renders no additional tag itself; it displays 
only what you assign to its Text property, and isthusvery useful to display HTM L orJavaScript 
that you build up in the Code Behind or that you retrieve from a database. 

The Localize control is used in multilingual websites and is able to retrieve its contents from trans- 
lated resource files. The substitute control is used in advanced caching scenarios and enables you 
to update only parts of a page that is otherwise cached completely. Both of these controls fall outside 
the scope of this book, but for a good discussion of them you may want to get a copy of Wrox's 
Professional ASP.N ET 4.5 in C#and VB (ISBN ; 978-1-118-31182-0). 

Ad Rotator 

TheAdRotator control enables you to display random advertisements on your website. The ads 
come from an X M L file that you create on your server. Because it lacks advanced features like click 
tracking and logging that are required in most but the simplest scenarios, this control isn't used 
much in today's websites. 

HiddenField 

T he HiddenFieid control enables you to store data in the page that is submitted with each request. 
This is useful if you want the page to remember specific data without the user seeing it on the page. 
Because the field does show up in theHTM L source of the page, and is thus accessible to the end 
user, you should never store any sensitive data in it. 

XML 

The XML control enables you to transform data from an X M L format to another format (like 
XHTML) for display on a page. Check out Professional ASP.N ET 4.5 for a detailed description. 

Table 

The <asp:Tabie> control is in many respects identical to its H TM L <tabie> counterpart. 

H owever, because the control lives at the server, you can program against it, creating new columns 

and rows dynamically and adding dynamic data to it. 

T his condudes the discussion of the controls in the Standard category of the Toolbox. In most 
web pages, you'll be working with at least a few of these controls. The remainder of this section dis- 
cusses the other categories of the Tool box. Because most of them are used in some form in the remain- 
der of this book, this chapter just briefly describes their purpose so you get a rough idea what they are 
used for. You'll find cross-references to theother chapters where you can find out more information 
about them. 
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HTML Controls 

The H TM L category of theToolbox contains a number of H TM L controls that look similar to 
the ones found in the Standard category. For example, you find the input (Button) that looks 
like the <asp:Button>. Similarly, there is a select control that has the <asp:DropDownList> and 
<asp:ListBox> as its Counterparts. 

In contrast to the ASP. N ET Server Controls, the H TM L controls are client-side controls and end 
up directly in the final HTM L in the browser. You can expose them to server-side code by adding 
a runat = " serve r" attribute to them. This enables you to program against them from theCode 
Behind of a Web Form, to influence things like their visibility. 

The H TM L controls have a lot less functionality than the ones in the Standard category. For exam- 
ple, the Select control lacks design-time support for adding new items to the list with the Listltem 
Collection Editor. This forces you to write the items by hand in the M arkup View of VS. 

Because the controls in the Standard and HTML category look quite like each other, the next sec- 
tion discusses their differences and gives you some idea of when to favor one category over the other. 

How to Choose between Standard and HTML Controls 

There seems to besomeoverlap between the controls in the Standard and HTML categories of the 
Toolbox. So which ones should you choose and when? Generally, the true server controls in the 
Standard category offer you a lot more functionality, both in terms of design-time support in VS 
and what they can do at run time. But this functionality comes at a price. Because of their increased 
complexity, the server controls take a little more time to process. H owever, on most websites you 
probably won't notice the difference. Only when you have a high-traffic website with lots of controls 
on the page do the H TM L controls give you a slightly better performance and consume less memory 
on the server when compared to the server controls. 

In most scenarios, favor the server controlsover theirHTM L counterparts. Because server controls 
offer more functionality, they give you more flexibility in your pages, enabling you to createa richer 
user experience. Also, the better design-time support makes it worth choosing these controls. 

Choose the HTML controls if you're really sure that you don't need the functionality that the server 
controls offer you. 

The remainder of this section quickly guides you through the other categories in theToolbox. 

Data Controls 

Data controls were introduced in ASP.N ET 2.0, and offer an easy way to access various data sources 
like databases, XML files, and objects. Instead of writing lots of code to access thedata source as 
you had to do in earlier versions of ASP.N ET, you simply point your data control to an appropriate 
data source, and the ASP.N ET run time takes care of most of the difficult issues for you. You see a 
lot more about these controls in Chapter 13 and onward. 
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Validation Controls 

Validation controls enable you to rapidly createWeb Forms with validation rules that prohibit users 
from entering invalid data. For example, you can force users to enter values for required fields and 
check whether the entered data matches a specific format lil<ea valid date or a number between 1 
and 10. They even allow you to write custom code to create validation routines that are not covered 
by the standard controls. The beauty of the validation controls is that they can execute both on the 
client and the server, enabling you to create responsive and secureweb applications. Chapter 9 digs 
much deeper into these controls. 

Navigation Controls 

The controls you find under the N avigation category of the Tool box are used to let users find their 
way through your site. TheTreeview control presents a hierarchical display of data and can be used 
to show the structure of your site, giving easy access to all the pages in the site. The Menu control 
does a similar thing and provides options for horizontal and vertical fold-out menus. 

The siteMappath control creates a "breadcrumb trail" in your web pages that enables your users to 
easily find their way up in the hierarchy of pages in your site. 

You see all of these controls in action in Chapter 7, which dealswith navigation in websites 
exclusively. 

Login Controls 

Just lil<ethedata and navigation controls, the login controls were introduced in ASP.N ET 2.0 and 
are still strongly present in ASP.N ET 4.5. With very little effort, login controls enable you to create 
secure websites where users need to sign up and log in before they can access specific parts of the 
website (or even the entire website). In addition, they provide the tools for users to change their pass- 
word, or request a new password if they forget the old one, and enable you to display different data 
depending on thelogged-in status and role of the user. Chapter 16 provides more details about the 
security features and login controls of ASP.N ET. 

Ajax Extensions 

TheAjax Extensions enable you to create flicl<er-free web applications that are ableto retrievedata 
from the server from client-side JavaScript without a full postback. You can find the full details on 
them in Chapter 10. 

Web Parts 

ASP.N ET WebParts area set of controls that enables an end user of a web page to change the 
appearance and behavior of a website. These controls are outside the scope of this book. 
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Dynamic Data 

The controls in this category are used in Dynamic Data websites. Dynamic Data sites enable you 
to quickly build a user interface to manage data in a database. These controls are not discussed fur- 
ther in this bool<. To learn more about them, checl< out Sams' ASP.N ET Dynamic D ata U nieashed, 
Oleg Sych and Randy Patterson, 2012 (ISBN : 978-0-672-33565-5). 


THE ASP.NET STATE ENGINE 

In the previous chapter, you created a page with a TextBox and a Button control. In the Try It 
Out, you ran this page in the browser, typed some text, and clicl<ed the button. The button caused 
a postback to the server, and when the page reloaded, the text was still present in the text box. 
You pretty much did the same thing with the wizard control in this chapter, where the values 
from the text box and the drop-down list were maintained as well. If you're familiar with other 
web technologies like ASP or PH P, this probably surprised you. In those languages, you often 
need to write lots of code to make this happen. So why and how does this work automatically in 
ASP.N ET? 

The text in the text box ismaintained by theASP.N ET state engine, afeaturethat isdeeply inte- 
grated into theASP.N ET run time. It enables controls to maintain their state across postbacks, so 
their values and settings remain available after every postback of the page. 

What Is State and Why Is It Important? 

To understand state, it's important to realize that, by design, H TTP— the protocol used to request 
and serve pages in a web browser— is stateless. W hat this means is that the web server does not keep 
track of requests that have been made from a specific browser. As far as the web server is concerned, 
each request you make to the server by browsing to a page and clicking links to other pages stands 
on its own. The web server has no recollection of pages you requested previously. 

This poses some interesting problems. Consider, for 
example, a simple login page that enables you to log 
in to a website, like your favorite web mail program. 
You can see a sample of the login box in Figure 4-16. 


Log In 

User Name: 


Password: 
Remember me next time. 


Log In 


FIGURE 4-16 


N ow imagine that you try to log in with a correct 
username but with an incorrect password. The page 
will then inform you that your login attempt failed. 
Ideally, you would also want your username to be 
filled in for you automatically, and you'd want the 
Remember M e N ext Time check box to retain its selection as well. That way, it's easy for the user 
to enter the correct password and click the Log In button again. This isjust a trivial example, but 
it's easy to come up with many more scenarios where it's useful if controls are able to maintain their 
ow n state. 


H owever, by default, a web page or a control cannot do this on its own. Because each request is a 
standalone request, the server won't fill in the text boxes again after a postback, but will simply 
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serve the page the same way it did when it first ioaded it. In other web technoiogies, iii<e dassic ASP 
or PH P, you couid wori< around this by manuaiiy writing code that prepopuiates controis after a 
postbaci<. Fortunateiy, ASP.N ET mai<esthis much easier for you by integrating thisfunctionaiity in 
theASP.N ET feature set. 


How the State Engine Works 

The state engine in ASP.N ET is capable of storing state for many controls. It can store state not only 
for user input controls I il<e a TextBox and a checkBox, but for other controls I il<e a Label and even 
a Calendar. This is best demonstrated by a demo. The following exercise shows you how to create a 
page with controls that are capable of maintaining their state. The sections that follow then explain 
how ASP.N ET is able to do this. 


TRY IT OUT 


Examining the ASP.NET State Engine 


In this exercise you add Label, Button, TextBox, and Calendar controls to the page. These controls 
are used to demonstrate some of the inner worl<ings of ASP.N ET, including postbacl<s and the way 
ASP.N ET maintains state. 

1. Under the Demos folder, create a new page called state. aspx. M ake sure it uses Code Behind, and 
don't forget to choose your preferred programming language. 

2. Switch the page to Design View, clicl< insidethe dashed <div> to put the focus on it, and then 
chooseTableo Insert Table from the main menu. Set Rows to 3 and Columns to 2 and clicl< OK 
to insert a table with three rows and two columns. 

3. In the first cell of the first row, drag a Label control from the Toolbox. In the first cell of the sec- 
ond row, drag a calendar control. 

4. N ote that as soon as you drop the calendar control in the cell, its Smart Tasl<s panel pops up as 
shown in Figure 4-17. 
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In the case of the calendar control, you only get oneoption on this panel, Auto Format, which 
enables you to change the appearance of the calendar. Click thelink, choose from one of the pre- 
defined color schemes, like Simple, and click OK. 

5. In the first cell of the last row, drag a TextBox control. 

6. N ext, drag Button controls into the right column of the first two rows of the table. 

7. Click the Button in the first row and press F4 to open the Properties Grid. Set the Button's 
Text property to set Date and its id to setDate. Y ou'll find the ID property all the way at 
the end of the list with properties, or at the beginning if you have the list with properties sorted 
alphabetically. 

8. Repeat the previous step for the other button but call it piainPostback and set its Text property 
to Plain postback. When youYedone, the page should look like Figure 4-18 in Design View. 

9. Double-click the Set Date button in Design View and add the following bolded code on the empty 
line between the code lines that VS inserted for you; 

VB.NET 

Protected Sub SetDate_Click (sender As Object, e As EventArgs) Handles SetDate . Click 
Labell.Text = DateTime.Now.ToString () 

End Sub 

C# 

protected void SetDate_Click (object sender, EventArgs e) 
{ 

Labell.Text = DateTime.Now.ToString () ; 

} 

There's no need to write code for the Plain Postback button. 

10. 0 pen the page in the browser by pressing Ctrl-ff 5. Select a date on the calendar by clicking one of 
the days. N otice that as soon as you click the date, the page reloads, caused by a postback. Y ou 
learn more about this in the H ow It Works section that follows this exercise. 

11. Enter some text in the TextBox control and then click the Set Date button a few times. Again, 
the page is posted back to the server and the Label is updated with today's date and time each 
time you click the button. The TextBox still shows the text you entered. Wait a few seconds, 
and then click the Plain Postback button. 0 nee again, a postback occurs, and the page reloads. 
N ow take a look at the text for the Label. It still contains the date and time that was dis- 
played when you last clicked the Set Date button. Click the Plain Postback button a few more 
times and notice that the Label doesn't change. The TextBox should still display the text you 
entered. 

12. Go back to VSand open the Properties Grid for the Label control in Design View. Locate the 
Enabieviewstate property and set it to False by selecting that value from the drop-down list or 
by double-clicking the property name or its value. Repeat this step for the TextBox control. 

13. Repeat steps 10 and 11 by reopening the page in the browser and clicking the calendar and the 
buttons. This time, when you click the Plain Postback button, you'll see that the Label control 
defaults to its initial text: Label. The TextBox, however, still displays the text you entered. 
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FIGURE 4-18 


How It Works 

To understand how this all works, you need to look at a few important elements. First, open up the 
page in the browser again and view its H TM L source. You can do this by right-clicking the page in the 
browser and choosing the View Source or View Page Source menu item. N ear the top of the window, 
you see the following <form> element: 

<form method="post" action= " State . aspx" id="forml"> 
</ f orm> 


The H TM L <form> element is used to enable a user to submit information from the browser to the 
server. A user can enter information using controls like text boxes, drop-down lists, check boxes, and 
so on. A form can be submitted in two ways: with post (as shown in the previous <form> element) or 
with GET. In the former case, all data from the form is added to the body of the request and then sent to 
the server. In the case of the get method, all thedata isappended to the actual address of the request. 
The intricacies of the differences are not that important right now; what's important to understand is 
what the <form> element is used for: it encapsulates form controls whose values are submitted back to 
the server en masse. 

W hen a control like a Button is clicked, it causes a postback to the server. During this postback, 
all the relevant information in the form is submitted back to the server where it can be used to rebuild 
the page. 

By default, all your ASP. N ET Web Forms always use the post method to send data to the server. Also, 
by default, an entire ASP.N ET page always contains exactly one form. Because this is so common, a 
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new page (or M aster Page as you learn in Chapter 6) created in VS aiready contains tlie <form> ele- 
ment, so you don't have to add it yourself. Finally, it's important to understand that an ASP.N ET Web 
Form by default always submits bacl< to itself. In other web environments, lil<eclassic ASP and PH P, it's 
not uncommon to set the action attribute of the page to a second page that then processes the data the 
user has submitted. H owever, with an ASP.N ET page, you'll find that even if you set the action attri- 
bute in the code explicitly, the ASP.N ET run time will revert it to the name of the current page. 


NOTE ASP.NET supports a feature called Cross Page Postbacks that enables 
you to submit from one page to another To learn more about this concept, 
search the MSDN site for Cross Page Postbacks or get yourself a copy of 
Professional ASP.NET 4.5 from Wrox. 


The next thing to look at is ASP.N ET's View State functionality implemented with the hidden 
viEwsTATE field that you seein theHTM L source bolded in the following snippet: 

<form method="post" action="State . aspx" id="forml"> 

<input type="hidden" name=" ^VIEWSTATE" id=" ^VIEWSTATE" 

value="IXcrUZ51B9YmtdoSL9csn2+VrYx5oW32kAw0oRXGsf3F0/W016/upieH7Nhtlf 
hyr99U0IRRKmjvYk4FdH5E9ZRucaja0xPkwCyRoNBI3KkidqR5eAVX86D 
qOfE1584eSB0f f3IF4o3Y+ZqD7qZp3A==" /> 

</div> 

Although at first the text appears to contain nothing more than random characters, it actually contains 
useful information. To protect the information stored in this field, ASP.N ET has converted the page 
state in the preceding string. If you were able to lool< inside the value of the fields, you'd find a value for 
theLabeii control with the current date and time. 

When your ASP.N ET pageloads, theASP.N ET run time fillsthis hidden field with information about 
the page. For example, it added the value for the Text property of theLabeii control when you caused 
a postbacl< by clicl<ing the Set Date button. Similarly, it contains the selected date for the calendar 

control. W hen the page is then submitted bacl< by a postback, the value in this hidden viewstate 

field issent with the request. Then, when ASP.N ET creates the new page on the server, the information 

from the viewstate field is read and applied to the controls in the page. This way, a control like the 

Label is able to maintain its text even after the page has been posted back to the server. 

The TextBox doesn't need View State, though. It's able to maintain its value because the browser sub- 
mits it to the server with each postback. 

To reiterate, here's a rundown of the process that took place in the preceding Try It Out. 

1. You requested the page in the browser by opening it from within VS. 

2. The browser got the page from the server by making a request for it. 

3. The ASP.N ET run time read the page from disk, processed it, and sent the resulting HTM L to 
the browser. At this stage, all the controls were set to their default values that were defined in the 
markup of the page. For example, the Text of the Label control is set to Label. 
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4. After the page got displayed in tlie browser, you clicl<ed tlieSet Date button. Tliis caused a post- 
bacl< to tlie server. 

5. At tlie server, tlie page was reconstructed again, similar to the first time it loaded, described in step 
3. At this stage, all the controls contain their default values. So, again, the Labeii control had its 
Text property set to Label. Shortly after the defaults have been set, the run time overrides these 
defaults for controls it finds in View State. However, because this was the first postbacl< and the 
Label control's Text property hadn't changed yet, its value was not present in View State. So the 
Text property just contained the default word Label. 

6. Whilestill processing the same request, the ASP. N ET run time fired the code in setDate_ciick. 
As you have seen, this code changed the Text property of the Label control to the current date and 
time. The ASP.N ET run time sees this change and stores this new value in View State as well, so it 
stays available for subsequent postbacks. 

7. Next, you entered some text and clicl<ed the Plain Postback button. J ust as with the other but- 
ton, this caused a postback to occur. The page was constructed again, and all defaults are set. 
Again, this means that the Text property of the Labeii control simply contains the word Label. 

H owever, shortly after that, during the same processing cycle, the ASP.N ET run time processes the 

View State, restoring control values it finds in the hidden viewstate field. In this example, it 

found the Text property with the current date and time, and assigned it again to the Label control. 
Because the Plain Postback button doesn't change the Text of the Label anymore, the Text prop- 
erty doesn't change: it contains the date and time from the previous postback. The Text property 
of the TextBox control is set using the value submitted to the server; that is, this control does not 
useView State to maintain its value. Attheend, the entire pageissent to the browser, where the 
label correctly displays its previous value. 

8. Finally, you turned off the View State for the Label and Texteox controls by setting 
Enabieviewstate to False. With this Setting turned off, the ASP.N ET run time doesn't track 
the Label control anymore. So when you click the Plain Postback button, the ASP.N ET run time 
doesn't find any information for the label in View State, which eventually results in the label dis- 
playing its own default text; the word Label. 


Not All Controls Rely on View State 

You have to understand that not all controls rely on View Stateall the time. A number of controls 
are able to maintain some of their own state, as you saw with the Texteox control in the preced- 
ing exercise. These controls include, among others, the TextBox, checkBox, RadioButton, and 
DropDownList controls. They are able to maintain their values because they are rendered as stan- 
dard HTM L form controls in the browser. For example, a TextBox server control ends up like this 
in the browser: 

<input name="TextBoxl" type="text" value="Initial Text" id="TextBoxl" /> 

W hen a page with such a TextBox in it is posted back, the browser also sends the value of the con- 
trol back to the server. TheASP.N ET run time can then simply look at that value to prepopulate 
the text box again, instead of getting the value from View State. Obviously, this is more efficient 
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than storing the value in View State too. If that were the case, the value would get sent to the server 
twice: once in the text box and once in View State. Especially with large values, this could quicl<ly 
increase the page's size, and thus its load time. For some features— such as tracl<ing changes made at 
the client— these controls still need to store their values in View State as well, and do so on a need- 
to-have basis. 

In addition to View State, controls support the concept of Control State. Controls use that mecha- 
nism to l<eep track of data they absolutely need to operate correctly. You cannot disable Control 
State but since only limited amounts of data are stored in Control State, this is not a problem. 

A Note about View State and Performance 

Because the View State engine adds a considerable amount of information to the page, it's 
often a good idea to turn it off when you don't need it. This way, you can minimize the size of 

the hidden viewstate field, which means the page becomes smaller and thus loads faster in the 

browser. N otethat when you turn of View State you still seethe hidden viewstate field because 

Control State uses the same field to store its data. Turning off View State is easy, and you can do it 
at three different places: 

>■ AtthewEbatele/el- You can do this in theweb.config file in the root of the site by modi- 
fying the <pages> element under <system.web>, setting the enabieviewstate attribute to 

false: 

<pages enableViewState= " false " > 
</pages> 

>• Atthepagele/d— At the top of each page you find the page directive, a series of instructions 
that tell the ASP. N ET run time how the page should behave. In the page directive you can set 

EnableViewState tO False: 

<%@ Page Language="VB" AutoEventWireup="False" CodeFile="State.aspx.vb" 
Inherits="Demos _ State" EnableViewState="False" %> 

This option is useful for pages where you're sure you don't need View State at all. 

> Atthecontrol IcmeI- Each ASP.N ET Server Control enables you to set Enabieviewstate 

individually, giving you the option to turn it off for some controls, while leaving it on for 
others. 

Once you've turned off View State at a higher level (web.conf ig or page level), setting 
Enabieviewstate to True again at a lower level (the page or a specific control) has no effect. 
H owever, using the viewstateMode property you can still accomplish this as follows: 

>■ Do not turn off View State in theweb.config file. 

>• At the page level, set Enabieviewstate to True and ViewstateMode tO Disabled lil<e this: 
<%@ Page Language="C#" ... EnableViewState="True" ViewStateMode="Disabled" %> 

This turns off View State for all controls in the page except for those that explicitly enable it 

again by setting the viewstateMode to Enabled. 
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For the controls you want to give View State support, set tlie viewstateMode to Enabled, 
lil<etliis: 

<asp:Label ID="Labell" runat="server " Text="Label" ViewStateMode="Enabled" /> 

If you want to see tliis at worl< in your demo page, modify tlie page directive of state. aspx as in 
the previous exampie by setting Enabieviewstate to True and viewstateMode to Disabled. Tlien 
create a second Label i n tlie page and set viewstateMode for tlie fi rst to Enabled: 

<asp:Label ID="Labell" runat="server " Text="Label" ■ViewStateMode="Enabled" /> 
<asp:Label ID="Label2" runat="server" Text="Label" /> 

In tiie Code Belli nd of the page, assign today's date and time to the second label as well: 

VB.NET 

Labell.Text = DateTime .Now.ToString { ) 
Label2.Text = DateTime. Now. ToString () 

C# 

Labell.Text = DateTime .Now.ToString {) ; 
Label2.Text = DateTime. Now. ToString () ; 

Finally, run steps 10 and 11 of the last Try It 0 ut exercise. You'll notice the first Label maintains its 
text, whereas the second defaults bacl< to the text Label. 

PRACTICAL TIPS ON WORKING WITH CONTROLS 

The following list presents some practical tips on worl<ing with controls: 

>" Spend sometime trying out thedifferent controls in the Standard category. Although many 
of them are used and discussed throughout the bool<, it's good to l<now how you should use 
them and how they operate. By experimenting with them now in a few sample pages, you 
have a head start when the controls reappear in later chapters. 

> Consider turning off View State for controlsthat don't need it. In many cases, you hardly 
notice the difference, but especially with the data-driven controls discussed in Chapter 13 and 
onward, disabling View State can seriously decrease the size of your web page, resulting in 
shorter load times and improved user experience. 

>- Before you design a complex Web Form with multiple controls to accept user input, step 
bacl< from your computer and take a piece of paper and a pen to draw out the required 
functionality. By thinl<ing about the (technical) design of your application before you start 
coding, it's much easier to create a consistent and well-thought-out user interface. M al<ing 
considerable changes later in the page if you've taken a wrong route will always take more 
time than doing it (almost) right the first time. 

>" Experiment with the View State mechanism to get a better understanding of how it works. 
Createa coupleof pages similar to theoneyou created in the last exercise. Then turn off 
View State at the page or control level and see how the page behaves. Take note of the con- 
trols, such as TextBox, that are capable of maintaining their value even with View State off. 
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SUMMARY 

This chapter gave you a good look at the large set of ASP.N ET Server Controls. Because these con- 
trols are so important and used throughout every ASP.N ET application, it's really critical that you 
understand what controls you have available in the Toolbox, what they are used for, how they work, 
and how they maintain their own state. 

One of the biggest inventions in ASP.N ET is the state engine that enables controls to maintain their 
state across postbacks. The state engine is a real time-saver and frees you from writing loads of 
tedious and boring code in every single web page to replicate this behavior. H owever, you should 
turn View State off when possible to improve performance. 

Thischapter also introduced you to some trivial server-side code in Visual Basicand in C#. The 
next chapter gives you a much better understanding of programming ASP.N ET pages. You see how 
a programming language looks, what elements it contains, and how to write code yourself to use in 
your ASP.N ET pages. And best of all, the examples are presented in Visual Basic and C#, so you're 
not stuck with a language you may not like. 


EXERCISES 


1 . Name the mechanism that enables server controls to maintain their state. 


2. How is the ASP.NET run time able to keep track of control state between postbacks? 

3. Name a difference between an <asp:DropDownList> and an <asp:ListBox>. 


4. What property do you need to cause a postback to the server when you change the checked 
state of a checkBox in the browser? 


5. Many server controls have a common set of properties that affects their looks at run time. Name 
three properties that change styling elements such as color, borders, and size. 


6. Instead of setting Individual control properties like Backcoior and ForeCoior, It's better to set a 
single CSS-related property. What's the name of this property and what benefit does It give you? 


You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 


VIEWSTATE 

The hidden form field that is used to transfer the state from the server to the 



Container controls 

Server controls that serve as a container by wrapping other content and 


uUI III Ulb. 

Events tab 

The part of the Properties Grid that lets you set up handlers for control events 


such as Click for a Button. 



List controls 

Server controls that present a list of items to the user. Controls include the 


Ul. U^l>UWliJ_i X o U, V„llCL'Jvi3(JJS.J_i J. o OIIU IIIWlC 

POST and get 

Different methods to submit data from the client to the server. With post 

mathod^ 

■ ■ 1 C LI ■ wU O 

the data i*^ added to the hodv of the renup'^t whereas with hft the data is 


appended to the address of the requested page. 

Postback 

The process of sending form data from a client browser back to the server. 

Server Controls 

The work horses of ASP.NET, used to build up the user interface of a web 


page in the browser. 

Smart Tasks panel 

The action panel that appears for some controls to help you accomplish 


common tasks. 


View State 


The mechanism that enables the ASP.NET controls to store state at the client. 


Programming Your ASP.NET 
Web Pages 

WHAT YOU WILL LEARN IN THIS CHAPTER: 

>• How to work with data types, variables, objects, and collections in a 
programming environment 

> Different ways to make decisions in your code 

> The options available for creating blocks of functionality that can 
easily be reused 

> Different ways to write well-organized and documented code 

>• What object orientation is, and how you can use it in your 
applications 


WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Codetab at 
www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the Chapter 5 download. 

In the previous four chapters, you created a number of Web Forms that contained mostly ASP 
.N ET Server Controls and plain H TM L. 0 nly a few of the examples contained actual pro- 
gramming code, written in either C#or Visual Basic (VB.N ET), and most of that code was 
pretty straightforward. H owever, not all of your pages will always be so simple, and the abil- 
ity to read, understand, and write code is a critical asset in your web development toolkit. 

This chapter teaches you the basics and beyond of programming for web applications. J ust 
as with all the other samples in the book, this entire chapter covers both V B.N ET and 
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C#. For every concept or piece of theory introduced in tliis ciiapter, you see an exampie in botli 
VB.N ET and C #at tiie same time. W iiicli ianguage you prefer is entireiy your decision. 


NOTE To get the most out of this chapter, it's recommended that you actually 
try out the code. You can test most of the examples with a simple ASPX page. 
Drag a Label and a Button on your page and double-click the Button In Design 
View. Then type the sample code on the open line of the code block that VS 
added for you and press Ctrl+F5. After the page has finished loading, click the 
button and the code will be executed. Some of the examples call fictitious code 
and won't run correctly. They only serve to Illustrate the topic being discussed. 


INTRODUCTION TO PROGRAMMING 

To get started witii programming, it's criticai to understand a common set of terms siiared by pro- 
grammers in aii types of ianguages and appiications. The remainder of tliis ciiapter introduces you 
to a relatively large number of terms and concepts. M ost of the terminology comes with code exam- 
ples so you can see how they are used in real code. 

It's also important to realize this is not a complete introduction to programming. N ot every detail of 
a programming language is covered. Instead, this chapter focuses on the l<ey concepts that you need 
to understand to successfully build day-to-day websites. 0 nee you get the hang of that you'll find it's 
easier to deepen your l<nowledge about programming by learning the more exotic features of your 
favorite programming language. 


NOTE If you're interested in learning a lot more about programming in VB.NET 
or C#, find Beginning Visual Basic 2012 (ISBN: 978-1-1183-1181-3) or Beginning 
Microsoft Visual C#2012 (ISBN: 978-1-1183-1441-8), both published by Wrox. 


You add the code you write in this and coming chapters either to the Code Behind of a web page, or 
in a separate class file placed in the special App_code folder. When theASP.N ET run time processes 
the request for a page containing code, it compiles any code it finds in the page. Code Behind, or 
class files first. W hen code is compiled, it is being transformed from a human-readable programming 
language (lil<eC#or VB.N ET) into M icrosoft I ntermediate Language (M SI L), the language that the 
.N ET Framework run time can understand and execute. The result of the compilation process of an 
ASP.N ET website is one or more assemblies — files with a DLL extension — in a temporary folder 
on your system. This compilation process tal<es place only the first time the page is requested after 
it has been created or changed. Subsequent requests to the same page result in the same DLL being 
reused for the request. Fortunately, in ASP.N ET websites, compilation tal<es place behind the scenes, 
so you usually don't have to worry about it. 

To get started with programming, the first concepts that you need to look at are data types and vari- 
ables, because they are the building blocks of any programming language. 
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NOTE The .NET Framework used by ASP.NET is huge and contains thousands 
of types with hundreds of thousands of members. Clearly, you cannot memorize 
all the types in the framework, so you need to make good use of resources like 
IntelliSense and the online help. Navigating the MSDN site (http: //msdn 
.microsoft . com/en-us/iibrary/j con sometimes be o daunting task. However, 
I often find that searching for something like typeName type . net msdn brings up 
exactly what I need. So, If I wanted to learn more about the string class, I'd type 
string class .NET MSDN In my favorite search engine. Nine Out of ten times the 
first result is a link to the relevant page on the MSDN website, where I can learn 
more about the class — where it's defined and located and how to use it 


DATA TYPES AND VARIABLES 

At first when you think about data that is used in some programming environment, you may not 
realize that each pieceof data has a data type. You may thinl< that a computer would store the text 
H ello World in exactly the same way as today's date or the number 26; as a series of characters, for 
example. H owever, to be able to effectively work with data, many programming languages have dif- 
ferent data types, and each data type is constrained to a specific type of information. Out of the box, 
the .N ET Framework comes with a long list of data types that enable you to work with numbers 
(such as int32, intie, and Double), text strings (char and string), dates (oateTime), true/false 
constructs (the Boolean), and more. A list of the most common types is supplied later in this section. 

For each major type of data there is a special data type. To work with that data, you can store it 
in a variable that you need to declare first using the required data type. In VB.N ET you use Dim 

myVariable As DataType, WhereaS i n C #yOU USe DataType myVariahle tO declare a Variable. A 

valid variable name typically consists of letters, numbers, and underscores, and cannot start with a 
number. These rules apply to other identifiers as well, such as classes and methods, which you see 
later. The following example shows you how to declare two variables: an integer (int in C#) to 
hold a number and a string (string in C#) to hold a piece of text: 

VB.NET 

' Declare a variable of type Integer to hold medium sized whole numbers. 
Dim distanoelnMiles As Integer 

' Declare a variable to hold some text like a first name. 
Dim firstName As String 

C# 

// Declare a variable of type int to hold medium sized whole numbers, 
int distancelnMiles ; 

// Declare a variable to hold some text like a first name, 
string firstName; 

These two code examples also contain comments, prefixed with a tick (■) in VB.N ET or two for- 
ward slashes (//) in C#. You learn more about commenting your code later in this chapter. 
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After you have declared a variable, you can assign It a value. You can assign types like numbers 
and booleans directly to a variable. To assign a string to a variable you need to enclose It In double 
quotes: 

VB.NET 

Dim distancelnMiles As Integer 
distancelnMiles = 437 

Dim firstName As String 
firstName = "Imar" 

C# 

int distancelnMiles; 
distancelnMiles = 437; 

string firstName; 
firstName = "Imar"; 

In addition to separate declarations and assignments, you can also declare a variable and assign It a 
value In one fell swoop: 

VB.NET 

Dim distancelnMiles As Integer = 437 
Dim firstName As String = "Imar" 

C# 

int distancelnMiles = 437; 
string firstName = "Imar"; 

Although a variable name can be nearly anything you like. It's advised that you give each variable 
a meaningful name that describes Its purpose. For example, a string to hold a first name could be 
called firstName and a variable that holds someone's age could simply be called age. In .N ET It's 
common to write local variables In what's called camel case, which means each word starts with a 
capital letter except for the first. To help you find the type of the variable later In the code, VS shows 
a useful tooltip when you hover over a variable In the code editor, making It super easy to find a vari- 
able's type. Figure 5-1 shows that the distancelnMiles variable In the C #example Is of type int. 


int distancelnMiles; 
distancelnMiles = 437; 

(local variable) int distancelnMiles 

TirstName = Imar ; 

FIGURE 5-1 

You're advised not to prefix your variables with letters to Indicate the type. For example, write 
firstName and not sFirstName for a String holding someone's name. This type of notation, called 
H ungarlan N otatlon. Is considered outdated. IDEs IlkeVlsual Studio, with their smart IntelllSense 
and other programming tools, don't really require this anymore. Without H ungarlan N otatlon, your 
code becomes easier to read (age Is more readable than lAge) and easier to maintain because you 
can change a variable's type without renaming It everywhere It's used. 
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M icrosoft .N ET supports a large number of different programming languages, including VB.N ET, 
C#, and others. All these languages are able to communicate with each other. For example, you can 
write some code in C#, use Visual Studio Express 2012 for Windows Desl<top to compile it to a 
.dii file (a file with reusable code that can be consumed by other .N ET applications), and then use 
it in a web application that uses VB.N ET as the primary language. Becauseof this interoperability, 
it's necessary to agree on some system that enables all .N ET programming languages to understand 
each other. This system is called the Common Type System (CTS). It's the CTS that defines the data 
types that are accessible to all CTS-compliant languages. Each language is then free to define a set 
of primitive types, which are essentially shortcuts or aliases for the more complex type descriptions 
in the .N ET Framework. So, even if the CTS defines a type called system. int32, a language lil<e 
C#is free to alias this type as int and VB is free to alias this type as integer to mal<e it easier for a 
developer to work with it. 

The following table lists the most common CTS types in the .N ET Framework and their C#and 
VB.N ET aliases. The table also lists the ranges of the variables and what they are used for. 


.NET 

c# 

VB.NET 

DESCRIPTION ^^^B 

System. Byte 

byte 

Byte 

Used to store small, positive whole numbers 
from 0 to 255. Defaults to 0 when no value is 
assigned explicitly. 

System.lntie 

short 

Short 

Capable of storing whole numbers between 
-32,768 and 32,767. Defaults to 0. 

System. Int32 

int 

Integer 

Capable of storing whole numbers between 
-2,147,483,648 and 2,147,483,647. Defaults to 
0. 

System. Int64 

long 

Long 

Holds whole large numbers between 
-9,223,372,036,854,775,808 and 
9,223,372,036,854,775,807. Defaults to 0. 

System. Single 

float 

Single 

Stores large numbers with decimals between 
-3.4028235E+38 and 3.4028235E+38. Defaults 
to 0.0. 

System. Double 

double 

Double 

Can hold large fractional numbers. It's not as 
accurate as the Decimal when it comes to the 
fractional numbers but when extreme accuracy 
is not a requirement, you should prefer the 
Double over the Decimal, because the Double 
is a little faster. Defaults to 0.0. 

System. Decimal 

decimal 

Decimal 

Stores extremely large fractional numbers with 
a high accuracy. Defaults to 0. This data type is 
often used to store monetary values. 


continues 


150 I CHAPTERS PROGRAMMING YOUR ASP.NET WEB PAGES 


(continued) 


^^^^^ 

c# 

VB.NET 

DESCRIPTION 1^0|||[H|m||||[||H^| 

Oyo 11:^1 1 1.DUtJItral 1 

bool 

Rr^i^ loan 

False in VB, and true or false in C#. Defaults to 
False. 

System. DateTime 

n/a 

Date 

VB.NET has an alias for the System. DateTime 
data type to store date and time values. C# 
doesn't define an alias for this type. Defaults to 
1/1/0001: 12:00 am. 

System. Char 

char 

Char 

Holds a single character. Defaults to Nothing 
(null in C#). 

System. String 

string 

String 

Can hold text with a length of up to 2 billion 
characters. Defaults to Nothing (null in C#). 

System.SByte 

sbyte 

SByte 

Used to store small numbers from -128 to 127. 
Defaults to 0. 

System. Ulntie 

ushort 

UShort 

Similar to a System. Int16, but this data type can 
only store unsigned whole numbers, between 0 
and 65,535. Defaults to 0. The other data types 
prefixed with a U are all unsigned as well. 

System. Ulnt32 

uint 

Ulnteger 

Capable of storing whole numbers between 0 
and 4,294,967,295. Defaults to 0. 

oysiem.uiniD^ 

ulong 

ULong 

CapsbiG of storinQ wholG numbers bGtwG©n 0 
and 18,446,744,073,709,551,615. Defaults to 0. 

System. Object 

object 

Object 

The parent of all data types in .NET, including 
the CTS types and types you define yourself. 
Each data type is also an object, as you learn 
later in the book. Defaults to Nothing (null in 
C#). 


The standard .N ET types are all prefixed with system followed by a period. This system part is the 
namespace for this data type. You learn what namespaces are and what they are used for later in 
this chapter. 

Sometimes you need to convert data from one type to another. For example, you may have an int32 
that you need to treat as a Double. You can do this in a number of different ways. 

Converting and Casting Data Types 

The most common way to convert a type is converting it into a string. Web applications use string 
types in many places. For example, the Text returned from a xextBox is a string, and so is the 
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seiectedvalue of a DropDownList. To get a String representation of an object, you can caii its 
TostringO metliod. Every object in tlie .N ET worid supports tliis metliod, aitliougli tlie exact 
beliavior may differ from object to object. For now, it's important to understand tliat Tostring is a 
metliod — or an operation — on an object, lil<e a string or a Double and even tlie parent object 
itself. You learn more about methods and objects later in this chapter when object-oriented pro- 
gramming is discussed. 

Using Tostring 0 is easy, as the following example that outputs today's date and time on a Label 
control demonstrates: 

VB.NET 

Labell.Text = System. DateTime .Now. ToString ( ) 
C# 

Labell.Text = System. DateTime .Now. ToString () ; 

Another way to convert data types is by using the convert class. 


NOTE Classes are an important concept in .NET, so thiey are discussed in their 
own section later in this chapter. For now it's important to understand that a 
class is like a blueprint for objects that are used in .NET. You can create your 
own classes, but you will also use many of the standard classes that are part of 
the .NET Framework. 


The Convert class contains functionality to convert a number of data types into another type. The 
following is a simple example of converting a string containing a valuethat looks lil<e a boolean 
1 nto a true Boolean type: 

VB.NET 

Dim myBooleanl As Boolean = Convert . ToBoolean ( "True" ) ' Results in True 
Dim myBoolean2 As Boolean = Convert . ToBoolean ( "False" ) ' Results in False 

C# 

bool myBooleanl - Convert .ToBoolean { "True" ) ; // Results in true 

bool myBoolean2 = Convert . ToBoolean { "False" ) ; // Results in false 

Besides thexoBooiean method, convert offers you a host of other conversion methods, including 
Toint32 (for integer types), xoDateTime (for dates), and Tostring. 

Another way to convert one type into another is by using casting. With casting you actually force 
one type into another, which is different from converting, in which the underlying value of a data 
type is transformed into a new value. 

Casting only works for compatible types. You can't, for example, cast a DateTime into an integer. 
You can, however, cast similar types, like a Double to an integer or a string to an object. 
The reverse of the latter example isn't always true. Earlier I said that every data type in the .N ET 
Framework is based on the object data type, meaning that, for example, a string is an object. 
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H owever, not every object is also a string. W hen you try to cast one type into anotlier and get a 
compiiation or runtime error, i<eep tliis in mind. Later cliapters in tliis bool< sliow you more exam- 
ples of how to cast compatible types into each other. 

To cast one type into another using V B.N ET, you have a few options. First, you can usecType and 
Directcast. cType is a bit more flexible in that it allows you to cast between two objects that look 
similar. Directcast, on the other hand, only allows you to cast between compatible types but per- 
forms slightly faster. The following VB.N ET example shows how thisworl<s: 


Dim ol As Object = 1 

Dim il As Integer = DirectCast (ol, Integer) 
Dim i2 As Integer = CType (ol. Integer) 


Works, because ol is an Integer 
Works, because ol is an Integer 


Dim o2 As Double = 1 

Dim i3 As Integer = DirectCast(o2, Integer) 
Dim i4 As Integer = CType(o2, Integer) 


Does not compile, because o2 is 

not an Integer 
Works, because o2 looks like an 

Integer 


In the first part of the example, an object called oi is declared and assigned the integer value 
of 1. Although oi exposes itself to the outside world as an object, its underlying value is still an 
Integer. W hen DirectCast is Called, the cast succeeds because ol is, under the hood, an integer. 

In the second example, 02 isdeclared asa Double, a numeric type that looks somewhat likean 
Integer, but isn't really one. Therefore, the call to Directcast fails because a Double cannot be 
cast to an integer. CType, on the Other hand, works fine, because the underlying value of the vari- 
able 02 looks likean integer and can therefore be cast to one. It's important to realize that if the 
Double type has a decimal part, that part gets lost when casting it to an integer. 

The third option to cast in VB.N ET is using the keyword Trycast, which is somewhat similar to 
the other two options. W hen an object cannot be cast correctly, Trycast returns Nothing, whereas 
DirectCast and CType resultin a crash of the code. 

In C#you have two options to cast objects. The most common way is to put the data type in paren- 
theses in front of the expression you want to cast. This works similar to CType in VB. 


object ol = 1; 
int il = (int)ol; 


// Works 


double o2 = 1; 
int i2 = (int)o2; 


// Works 


Alternatively, you can use the as keyword, which works similarly to TryCast in VB.N ET in that the 
code doesn't crash if the cast doesn't succeed. The following sample code shows that you cannot cast 
an Integer to an ArrayList (which you meet later in this chapter). Instead of crashing, the variable 
myList simply contains nuii to indicate that the cast operation didn't succeed. 

object ol = 1; 

ArrayList myList = ol as ArrayList; // Doesn't cast, but doesn't crash either. 

You see more about casting and converting in the remaining chapters in this book. 
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Using Arrays and Collections 

So far the data types you have seen are relatively straightforward and singular objects. For exam- 
ple, you store a value of True or False In a Boolean type, and you store a number like 123 In an 
Integer. But What If you have the need to store lots of Integers? You may have the need to do so If 
you want to store the points of a complex shape I Ike a polygon. 0 r you may have the need to store 
all the roles that your application supports In a single variable so you can show them on a web page 
In the M anagement section, for example. H ere's where arrays and collections come to the rescue. 

Defining and Worl<ing witii Arrays 

You can see an array asa big bag or list of the same type of things. You define the data type of the 
things In the array when you declare It. Each Item In the array Is Identified by a sequential number 
(Its so-called Index) starting at 0, making arrays zero-based. W hen declaring and accessing an array 
In VB.N ET you use parentheses, whereas In C#you use square brackets. After you have defined the 
array and populated Its elements, you can access the elements by their zero-based element Index (0, 
1, 2, and so on). 

The following code snippet defines an array called roies that can hold up to two roles at the same 
time: 

VB.NET 

Dim roles (1) As String 
C# 

string [] roles = new string [2]; 

See the difference between the VB.N ET and C# examples? That's not a typo. In VB.N ET you define 
an array's size by specifying the upper bound. The upper bound Is the last element In the array that 
you can access. Because arrays are zero-based (that Is, you address the first Item In the array with an 
Index of 0), It means that If you need room for two Items, the upper bound Is 1, giving you the Items 
0 and 1. 

In C#, on the other hand, you don't define the upper bound but Instead you define the size. So In C#, 
you simply specify 2 to get an array with two elements. 

Additionally, C#requlresyou to use the keyword new, which Instantiates a new array for you. 
VB.N ET does that for you automatically and raises an error If you add the New keyword as In the 
C#example. You see the new (now In VB.N ET) keyword again later In thischapter. 

To enter the role names Into the array you use the following syntax: 

VB.NET 

roles (0) = "Administrators" 
roles (1) = "ContentManagers" 

C# 

roles [0] = "Administrators"; 
roles [1] = "ContentManagers"; 
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Just as with the array's declaration, you use parentheses in VB.N ET and square bracl<ets in C#to 
address the dements in the array. N ote that (o) and [o] refer to the first element in the array and 
(0) and [1] refer to the second. 

By design, arrays have a fixed size. So, given the previous example that defines an array with room 
for two elements, the following code will throw an error: 

VB.NET 

roles (2) = "Members" ' Throws an error 
C# 

roles [2] = "Members"; // Throws an error 

This code tries to squeeze a third role into an array that has room for only two. Obviously, that 
doesn't fit and you'll get an error stating that the "Index was outside the bounds of the array." 
But what if you need to create more room in the array at a later stage in your code at run time? In 
VB.N ET this is pretty easy. You can use the ReDim Statement: 

ReDim Preserve roles (2) 

roles (2) = "Members" ' Works fine now 

This line of code re-dimensions the array to its new size: an upper bound of two, thus creating 
room for a third element. The preserve keyword is necessary to leave the current items in the array 
intact. Without it, the resized array will be empty. 

C#has no direct keyword to re-dimension an array. H owever, you can leverage the Array class of 
the .N ET Framework to resize the array as follows: 

Array . Resize {ref roles, 3); // Resize the array so it can 

// hold three elements 

roles [2] = "Members"; // Works fine now 

Don't worry about this odd-looking syntax right now; you probably won't need it very 
often, because the .N ET Framework offers alternatives to fixed-size arrays. Since Array 
.Resize is avai lable to VB.N ET as well, you have two options to choose from if you're using that 
language. 

W hen you start working with arrays, you find that they are quick to use at run time, but lack some 
useful functionality. For example, it's not so easy to add new elements or to remove existing items 
from the array. Fortunately, the .N ET Framework offers a range of useful collections that do give 
you the feature set you need. 

Defining and Worl<ing with Collections 

Collections are similar to arrays in that they enable you to store more than one object in a single 
variable. The same bag analogy works for collections: You can simply drop a number of items in a 
bag, and it will hold them for you. W hat's different with collections is how they enable you to work 
with the data in the bag. Instead of simply accessing each item by its index, most collections expose 
an Add method that enables you to add an item to the collection. Similarly, they have Remove and 
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Clear methods to remove one or all Items from the collection. Just like arrays, they enable you to 
Iterate, or loop, over them to access the Items In the collection. 

W hen collections were first Introduced In the .N ET Framework 1.0, the ArrayList and Hashtabie 
became popular very quickly because they were so easy to use. The ArrayList enables you to add 
arbitrary objects that are then stored In the order In which you add them, whereas the Hashtabie 
enables you to store objects referenced by a custom key. The main benefit of these collections over 
their array cousins Is that they can grow on demand. Unlike the previous example, where you 
needed to resize the array to create room for the third role, the ArrayList grows dynamically when 
required. The following example shows you how this works: 


VB.NET 

Dim roles As New ArrayList () ' Create a new ArrayList. You don't need 

' to set its size explicitly 


roles .Add ( "Administrators" ) ' Add the first role 

roles .Add ( "ContentManagers " ) ' Add the second role 

roles .Add ( "Members" ) ' Keep adding roles and the ArrayList 


grows as necessary 


C# 


ArrayList roles = new ArrayList () ; // Create a new ArrayList. You don't need 

// to set its size explicitly 

roles . AddC'Administrators") ; // Add the first role 

roles. AddC'ContentManagers") ; // Add the second role 

roles. AddC'Members") ; // Keep adding roles and the ArrayList 

// grows as necessary 

Because this code now calls a method (Add) rather than assigning an Item to a predefined Index In 
an array, you need parentheses (o ) In both VB.N ET and C#. The usage of methods Is discussed 
later In this chapter. 

Although collections solve some of the problems that arrays have, they Introduce a few problems of 
their own. The biggest drawback of the ArrayList Is that It Isn't strongly typed. W hat this means 
Is that you can add any object to the list using the Add method. This means that the ArrayList 
could hold objects that are of different types at the same time. This may not seem to be a big deal 
at first, but as soon as you start working with an ArrayList that contains multiple types of objects, 
you'll quickly see why this Is problematic. Take the roles example again. W Ith the array and the 
ArrayList verslons, the code simply added a few strings containing role names. You can then use 
these three strings to, say, build up a drop-down list In a Web Form to enable a user to pick a role. 
So far, so good. But what If one of the Items In the list Is not a string? W hat If another developer 
accidentally wrote some code that adds a DropDownList control to the ArrayList? Because the 
ArrayList accepts all objects. It won't complain. H owever, your code will crash If It expects a 
string, but gets a DropDownList control Instead. 

With .N ET 2.0, M Icrosoft Introduced a concept called generics. Generics are still strongly present 
In version 4.5 of .N ET, helping you overcome the problems that weakly typed collections like the 
ArrayList Introduced. 
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An Introduction to Generics 

Since their introduction witli .N ET 2.0, generics pop up in many different locations in tlie .N ET 
Framewori<. Aitliougli tliey are used often in situations wliere collections are used, the use of gener- 
ics is not limited to collections; you can also use them for singular types of objects. 

Generics are to code what M icrosoft Word templates are to word processing. They enable you to 
write a code template that can be used in different scenarios with different types. With generics, 
you can define a generic code template that doesn't explicitly specify a type. Only when that code is 
used do you define the type. The main benefit of this is that you can reuse the same template over 
and over again for multipledata types, without retyping and maintaining multiple versions of the 
code. In addition to using generics in your own code definitions, you find a host of generics-enabled 
objects and collections in the .N ET Frameworl<, ready to be used by your code. 

To understand how you can take advantage of generics, tal<ea lool< at the following example. It's 
essentially the same code you saw earlier where the ArrayList wasused, but this time the type of 
the list is constrained so it accepts only strings: 

VB.NET 

Dim roles As New List {Of String) 

roles .Add ( "Administrators" ) 
roles .Add ( "ContentManagers" ) 
roles .Add ( "Members" ) 


List<string> roles = new List<string> { ) ; 

roles .Add ( "Administrators" ) ; 
roles .Add ( "ContentManagers" ) ; 
roles .Add ( "Members" ) ; 

N ot much code has changed to mal<e the roles list type safe. H owever, with the definition of List 
(Of string) in VB.N ET and List<string> in C#the new list is now set up to allow only strings 
to be added through its Add method. This compiles fine: 

roles .Add ( "Administrators" ) ; 

The following will not compile because 33 is not a String: 

roles. Add (33) ; 

Similar to a generics list of strings, you can also create lists to hold other types. For example: 


c# 


VB.NET 


Dim intList As New List (Of Integer) 
Dim boolList As New List (Of Boolean) 
Dim buttonList As New List (Of Button) 


Can hold Integers only 
Can hold Booleans only 
Can hold Button controls only 


C# 


List<int> intList = new List<int> () ; 
List<bool> boolList = new List<bool> () ; 
List<Button> buttonList = new List<Button>() 


// Can hold ints only 

// Can hold bools only 

// Can hold Button controls only 
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NOTE Because there's a lot more to generics than what is shown here, 
they deserve an entire book of their own. Wrox has released such a book: 
Professional .NET 2.0 Generics by Tod Golding (ISBN: 978-0-7645-5988-4). 
Although it was originally written for .NET 2.0, you'll find that all the concepts 
and examples introduced in that book still apply. 


Though the Add method is useful to add items to a collection, it can sometimes be a bit tedious if 
you need to add multiple items to a collection at once. To make this easier, .N ET supports collec- 
tion initializers. With a collection initializer, you declare the collection and add some items in one 
step. You do this by adding the items in a pair of curly braces (prefixed with the keyword From in 
VB.N ET) as shown in the following example: 

VB.NET 

Dim myList As New List (Of Integer) From {l, 2, 3, 4, 5} 
C# 

List<int> myList = new List<int>() { 1, 2, 3, 4, 5 } ; 

Right after this line, the list is populated with the five integers. 

Collection initializers are not limited to the List class or integers. You can use them with other col- 
lection types and data types as well. 

The generics examples you have seen barely scratch the surface of what is possible with generics. 
However, when building ASP.N ET websites, you often don't need all the advanced stuff that gener- 
ics offer you. The List collection is so useful it had to be discussed here. W ithout a doubt, you'll use 
that collection in your own code one way or another. 


STATEMENTS 

To make a program or a website do something useful, you need to provide it with code statements 
that it can execute. Statements cover a wide range of actions, such as show this button, send this 
e-mail, execute this and that code when a user clicks that button, and so on. H owever, simply 
executing these actions is not enough. You often need to execute some code only when a certain 
condition is true. For example, if a visitor to an e-commerce website is buying more than $100 
worth of merchandise at onetime, she might get a discount of 10 percent. Otherwise, she'll pay the 
full price. Conditions or decisions are therefore very important statements in a programming lan- 
guage. Another important set of statements is the loops. Loops enable you to repeat a certain piece 
of code a number of times. For example, you can have a loop that goes from 1 to 10, performing 
some action on each iteration. Or you can loop through the products in a shopping cart, summing 
up their total price, for example. 

The final important set of statements is the operators. Operators enable you to do something with 
your values; or, to be more exact, they enable you to operate on them. For example, you use opera- 
tors to add or subtract values, concatenate (combine) them, or compare them to each other. 


The following three sections dig deeper into operators, decision making, and loops. 
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Operators 

The most important operators can be grouped logically into five different types; these types are cov- 
ered in this section. Of these five types, the assignment operators are probably the easiest to under- 
stand and use. 

Assignment Operators 

The assignment operators are used to assign a value to a variable. This value can come from many 
sources: a constant value, lil<ethe number 6, the value of another variable, or the result of an 
expression or a function, which are discussed later. In its simplest form, an assignment looks lil<e 
this, where the number 40 is assigned to the age variable: 

VB.NET 

Dim age As Integer = 4 0 
C# 

int age = 4 0; 

W hat if the person this age variable is referring to just had his birthday? You'd need to add i to the 
age value. That's where arithmetic operators come into play. 

Arithmetic Operators 

Arithmetic operators enableyou to perform most of the familiar calculations on variables and val- 
ues, lil<e adding, subtracting, and dividing. The following table lists the common arithmetic opera- 
tors for both VB.N ET and C#. 


VB.NET 

c# 

USAGE 

+ 

+ 

Adds two values to each other 



Subtracts one value from another 

* 

* 

Multiplies two values 

/ 

/ 

Divides two values 

\ 

n/a 

Divides two values but always returns a rounded integer 

A 

n/a 

Raises one value to the power of another 

Mod 

/o 

Divides two whole numbers and returns the remainder 


The first four operators probably lool< familiar, and their usage is pretty straightforward. The fol- 
lowing code snippet shows the basic operations you can perform with these operators: 

VB.NET 


Dim firstNumber As Integer = 100 
Dim secondNumber As Single = 23.5 
Dim result As Double = 0 
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result = firstNumber + secondNumber 
result = firstNumber - secondNumber 
result = firstNumber * secondNumber 
result = firstNumber / secondNumber 

C# 

int firstNumber = 100; 
float secondNumber = 23. 5F; 
double result = 0 ; 

result = firstNumber + secondNumber 
result = firstNumber - secondNumber 
result = firstNumber * secondNumber 
result = firstNumber / secondNumber 


Results in 123 . 5 

Results in 76.5 

Results in 2350 

Results in 4.25531914893617 


// Results in 123.5 

// Results in 76.5 

// Results in 2350 

// Results in 4.25531914893617 


N otethat in the C# example you need to add the letter f to the value of 23 .5. This tells the compiler 
you really want it to be a float rather than a double. 

VB.N ET also supports the\ operator, which basically performs the division and then drops the 
remainder from the value, effectively rounding the return value down to the nearest integer. 


VB.NET 

result = firstNumber \ secondNumber 


Results in 4 


C#doesn't have a special operator for this. H owever, when you try to divide two integers, the result 
is always an integer as well. This means that 7 (stored as an int) divided by 2 (stored as an int) will 
be 3. It's important to realize that this rounding occurs, or you may end up with unexpected results. 


The final two operators need a bit more explanation. First, the " operator ■ 
to the power of another — is available only in the VB.N ET language: 


for raising one number 


VB.NET 

Dim result As Double 


result = 2 
result = 3 


Results in 8 (2*2*2) 
Results in 9 (3 * 3) 


C#doesn't support this operator, but you can easily replicate its behavior using Math.pow, which is 
made available by the .N ET Framework. The following code snippet is functionally equivalent to 
the preceding one: 


c# 

result = Math.Pow(2, 3); 
result = Math.Pow(3, 2); 


// Results in 8 (2*2*2) 
// Results in 9 (3 * 3) 


Of course Math, pow is available to VB.N ET as well, so if you're using that language, you have two 
options to choose from. 

The final operator is called the modulus operator. It returns the remainder of the division of two 
numbers, lil<ethis: 


VB.NET 


Dim firstNumber As Integer = 17 
Dim secondNumber As Integer = 3 
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Dim result As Integer = firstNumber Mod secondNumber ' Results in 2 

C# 

int firstNumber = 17; 
int secondNumber = 3 ; 

int result = firstNumber % secondNumber; // Results in 2 

Simply put, the modulus operator tries to subtract the second number from the first as many times 
as possible and then returns the remainder. In the preceding examplethis will succeed five times, 
subtracting a total of 15, leaving a remainder of 2, which is then returned and stored in the result. 
The modulus operator is often used to determine if a number is odd or even. 

W hen working with operators, it's important to l<eep their precedence in mind. To see why this is 
important, consider the following calculation; 

2 + 10 * 4 

W hat is the outcome of this? You may think the answer is 48 if you first add 2 and 10 together, and 
then multiply the result by 4. H owever, the right answer is 42; first the multiplication operator is 
applied on 10 and 4, resulting in 40. Then 2 isadded, which leads to 42 as the final result. The fol- 
lowing table shows the operator precedence for both VB.N ET and C#. 


VB.NET 


C# 


A 

Exponentiation 

*, /, % 

Multiplication, division, and 
modulus 

*,/ 

Multiplication and division 

+, - 

Addition and subtraction 

\ 

Integer division 



Mod 

Modulus arithmetic 



+, - 

Addition and subtraction and string 
concatenation using the plus (+) symbol 



& 

String concatenation 




To force a different operator order, you can use parentheses around expressions. The contents of the 
expressions are evaluated first, resulting in a different order. For example; 


(2 + 10) * 4 

This does result in 48 now, because the addition operator is applied before the multiplication 
operator. 

Both languages also enable you to combine the arithmetic and assignment operators, enabling you 
to take the value of a variable, perform some arithmetic operation on it, and assign the result back 
to the variable. The following examples show how this works; 

VB.NET 

Dim someNumberl As Integer = 3 
Dim someNumber2 As Integer = 3 
Dim someNumber3 As Integer = 3 
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Dim someNumber4 As Integer = 3 


someNumberl += 3 
someNumber2 -= 3 
someNumber3 *= 3 
someNuniber4 /= 3 


Results in someNumberl having the value 6 
Results in someNumber2 having the value 0 
Results in someNumber3 having the value 9 
Results in someNumber4 having the value 1 


C# 

int someNumberl 
int someNumber2 
int someNumber3 
int someNumber4 
someNumberl += 3 
someNumber2 -= 3 
someNumber3 *= 3 
someNumber4 /= 3 


// Results in someNumberl having the value 6 

// Results in someNumber2 having the value 0 

// Results in someNumber3 having the value 9 

// Results in someNumber4 having the value 1 


C#also enables you to increase a variable's value by i using the ++ operator, likethis: 
c# 


int someNumber 
someNumber++ ; 


3; 


// Results in someNumber having the value 4 

This construct is used often in loops, as you'll seelater in the chapter. 

Both languages also use arithmetic assignment operators to concatenate string values, as you'll see 
shortly. 

Another common set of operators is the comparison operators, which enable you to compare values. 

Comparison Operators 

Just as with the arithmetic operators, VB.N ET and C#each have their own set of comparison 
operators to compare one value to another. A comparison operator always compares two values or 
expressions and then returns a boolean value as the result. The following table lists the most com- 
mon comparison operators. 


VB.NET 

C# 

Usage ^|^n^g^^m|||||||||mm^^^^^^^^^^^^^^i 



Checks if two values are equal to each other 

<> 

!= 

Checks if two values are not equal 

< 

< 

Checks if the first value is less than the second 

> 

> 

Checks if the first value is greater than the second 

<= 

<= 

Checks if the first value is less than or equal to the second 

>= 

>= 

Checks if the first value is greater than or equal to the second 

Is 

is 

In VB.NET: Compares two objects. In C#: Checks if a variable is of a 
certain type 
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The first thing you'll notice is that C# uses a double equals symbol (==) for the standard comparison 
operator. This clearly makes it different from the assignment operator. It's a common mistal<e in 
C# to use only a single equals symbol if you intend to compare two values. Consider the following 
example: 

if (result = 4) 
{ 

// Do something here with result 

} 

The intention here is to see if result equals 4. H owever, because the assignment operator is used 
instead of a proper comparison operator, you'll get the compile error that is displayed in Figure 5-2. 


Error List ^■---.■-^■:■^:•^.^■.v--■.^^-:•:•-^^^■--.-.■.^■:•:v 

•r n X 

T » |0 1 Error ! OWarnings i ' OMessages 

Search Error List P - 

Description File Line 

Column Project 

Ol Cannot implicitly convert type 'int' to 'bool' Default.aspx.cs 13 

9 Site 


FIGURE 5-2 


At first the error message may look a little strange. But if you look at the code a little closer, it starts 
to make more sense. First, result gets assigned a value of 4. This value is then used for the if state- 
ment. H owever, the if statement needs a boolean value to determine whether it should run the code 
inside the if block. Because you can't convert an integer valueto a boolean like this, you get a com- 
pile error. The fix is easy, though; just use the proper comparison operator instead: 

if (result == 4) 

{ 

// Do something here with result 

} 

Similar to the simple comparison operator, you can use the other operators to compare values: 

VB.NET 

4 > 5 ' 4 is not greater than 5; evaluates to False 

4 <> 5 ' 4 is not equal to 5; evaluates to True 

5 >= 4 ' 5 is greater than or equal to 4; evaluates to True 

C# 

4 > 5 // 4 is not greater than 5; evaluates to false 

4 != 5 // 4 is not equal to 5; evaluates to true 

5 >= 4 // 5 is greater than or equal to 4; evaluates to true 

The Is keyword in VB.N ET and is in C#do something completely different. In VB.N ET, is com- 
pares two instances of objects, something you learn more about in the second half of this chapter. In 
C#, you use is to find out if a certain variable is compatible with a certain type. You can accomplish 
that in VB.N ET using theTypeof operator. The following two examples are functionally equivalent: 

VB.NET 

Dim myTextBox As TextBox = New TextBoxO 
If TypeOf myTextBox Is TextBox Then 
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' Run some code when myTextBox is a TextBox 
End If 

C# 

TextBox myTextBox = new TextBox ( ) ; 

if (myTextBox is TextBox) 
{ 

// Run some code when myTextBox is a TextBox 

} 

One of the arithmetic operators enables you to add two values to each other. That is, you use the 
plus (+) symbol to add two values together. But what if you want to combine two values, rather than 
add them up? That's where the concatenation operators are used. 

Concatenation Operators 

To concatenate two strings, you use the + in C#and the & character in VB.N ET. Additionally, 
you can use += and &= to combine the concatenation and assignment operators. Consider this 
example: 

VB.NET 

Dim firstString As String = "Hello " 
Dim secondString As String = "World" 
Dim result As String 

' The following three blocks are all functionally equivalent 
' and result in the value "Hello World" 

result = firstString & secondString 

result = firstString 

result = result &. secondString 

result = firstString 
result &= secondString 

C# 

string firstString = "Hello " ; 
string secondString = "World" ; 
string result; 

// The following three blocks are all functionally equivalent 
// and result in the value "Hello World" 

result = firstString + secondString; 

result = firstString; 

result = result + secondString; 


result = firstString; 
result += secondString; 
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In addition to tlie & and &= concatenation operators in VB.N ET, you couid use + and += as weii. 
H owever, depending on tiiedata types of tiie expressions you're trying to concatenate, you may not 
get tiie resuit you'd expect. Tai<ea iooi< at tiiis code snippet: 

Dim firstNumber As String = "4" 
Dim secondNumber As Integer = 5 

Dim result As String = firstNumber + secondNumber 

Because firstNumber is a String, you may expect tliefinai resuit to be 45, a concatenation of 4 and 
5. H owever, by defauit, tiie VB.N ET compiler will silently convert the string "4" into the number 
4, after which addition and not concatenation tal<es place, giving result a value of " 9", the string 
representation of the addition. 

To avoid this ambiguity, always use the & and &= operators to concatenate values. Additionally, you 
can tell VB.N ET to stop converting these values for you automatically by adding thefollowing line 
to the top of your code files: 

Option Strict On 

This forces the compiler to generate errors when an implicit conversion is about to occur, as in the 
previous example. 

The final group of operators worth lool<ing into is the logical operators, which are discussed in the 
next section. 

Logical Operators 

The logical operators are used to combine the results of multiple individual expressions, and to 
mal<e sure that multiple conditions are true or false, for example. Thefollowing table lists the most 
common logical operators. 


VB.NET 

C# 

Usage 

And 

& 

Returns True when both expressions result in a True value. 

Or 

1 

Returns True if at least one expression results in a True value. 

Not 

! 

Reverses the outcome of an expression. 

AndAlso 

&& 

Enables you to short-circuit your logical And condition 
checks. 

OrElse 

II 

Enables you to short-circuit your logical Or condition checks. 


The And, Or, and Not operators (&, |,and i in C#) are pretty straightforward in their usage, as dem- 
onstrated in thefollowing code snippets: 

VB.NET 


Dim numl As Integer = 3 
Dim num2 As Integer = 7 
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If numl = 3 And num2 = 7 Then 

If numl = 2 And num2 = 7 Then 

If numl = 3 Or num2 = 11 Then 

If Not numl = 5 Then 
C# 

int numl - 3; 
int num2 = 7; 


Evaluates to True because both 
expressions are True 

Evaluates to False because numl is not 2 
Evaluates to True because numl is 3 
Evaluates to True because numl is not 5 


if (numl 

if (numl 
if (numl 


3 Sc num2 


7) 


2 & num2 7) 

3 I num2 == 11) 


if (!{numl == 5)) 


// Evaluates to true because both 
// expressions are true 

// Evaluates to false because numl is not 2 

// Evaluates to true because numl is 3 

// Evaluates to true because numl is not 5 


TheAndAiso and orEise operators in VB.N ET and the && and | | operators in C#wori< very simi- 
iar to tlieir And and or counterparts (& and | ) in C#. T lie difference is tliat witli tliese operators tlie 
second expression is never evaluated wlien tlie first one already determines tlie outcome of the entire 
expression. So with a simple And operator: 


If numl = 2 And num2 


7 Then 


both expressions arechecl<ed. This means that both numi and num2 are asl<ed for their values to see 
if they equal 2 and 7, respectively. H owever, because numi does not equal 2, there really isn't a point 
in asking num2 for its value anymore because the result of that expression will never change the final 
outcome of the combined expressions. This is where the AndAi so (&& in C#) operator enables you to 
short-circuit your logic: 

VB.NET 

If numl = 2 AndAlso num2 = 7 Then 


C# 

if (numl 


2 &St num2 


7) 


W ith this code, the expression num2 = 7 (num2 
didn't meet the required criteria. 


7 in C#) is never evaluated because numi already 


This may not seem lil<e a big deal with these simple expressions, but it can be a real performance 
booster if one of the expressions is actually a slow and long-running operation. Consider this ficti- 
tious code: 

VB.NET 

If userName = "Administrator" And GetNumberOf RecordsFromDatabase () > 0 Then 
C# 

if (userName == "Administrator" & GetNumberOf RecordsFromDatabase () > 0) 
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The code for this if block executes only when the current user Is called Administrator 
and the fictitious call to the database returns at least one record. N ow, Imagine that 
GetNumberofRecordsFromDatabaseO Is a long-running Operation. It would be a waste of time to 
execute It If the current user weren't Administrator. AndAiso (&& In C#) can fix this problem: 

VB.NET 

If userName = "Administrator" AndAiso GetNumberOfRecordsFromDatabaseO > 0 Then 
C# 

if (userName == "Administrator" && GetNumberOf RecordsFromDatabase ( ) > 0) 

Now, GetNumberofRecordsFromDatabaseo wlll Only be executed When the Current user Is 
Administrator. The code wlll belgnored for all other users, resulting In Increased performance for 
them. 

M ost of the previous examples used an if statement to demonstrate the logical operators. T he if 
statement Itself Is a very Important language construct as well. The if statement and other ways to 
make decisions In your code are discussed next. 

Making Decisions 

M aking decisions In an application Is one of the most common things you do as a developer. For 
example, you need to hide a button on a Web Form when a user Is not an administrator. Or you 
need to display the even rows In a table with a light gray background and the odd rows with a white 
background. You can make all these decisions with a few different logic constructs, explained In the 
following sections. 

If, If Else, and Elself Constructs 

The If statement (if In C#) Is the simplest of all decision-making statements. The if statement con- 
tains two relevant parts: the condition being tested and thecodethat Isexecuted when the condition 
evaluates to True (true In C#.) For example, to make a button visible only to administrators you 
can usecodellkethls: 

VB.NET 

If User . IsInRole ( "Administrators" ) = True Then 

DeleteButton. Visible = True 
End If 

C# 

if (User . IsInRole ( "Administrators" ) == true) 
{ 

DeleteButton. Visible = true; 

} 

N ote that V B.N ET uses the if and End if keywords, whereas C# uses if together with a pair of 
curly braces to Indicate the code block that Is being executed. Also, with C#, the parentheses around 
the condition being tested are required, whereasVB.N ET requires you to use the keyword Then 
after the condition. 
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This code explicitly checks for the value True / true. H owever, this is not required and it's quite 
common to leave it out. The following example is equivalent: 

If User . IsInRole ( "Administrators" ) Then 

DeleteButton. Visible = True 
End If 

C# 

if (User . IsInRole ( "Administrators" ) ) 
{ 

DeleteButton. Visible = true; 

} 

I'll use this succinct version in the remainder of the examples in this chapter. Often you want to per- 
form a different action if the condition is not True. Using the negation operator Not or >. you could 
si mply w rite another statement: 

VB.NET 

If User . IsInRole ( "Administrators" ) Then 

DeleteButton. Visible = True 
End If 

If Not User . IsInRole ( "Administrators" ) Then 

DeleteButton. Visible = False 
End If 

C# 

if (User . IsInRole ( "Administrators" ) ) 
{ 

DeleteButton. Visible = true; 

} 

if (! User . IsInRole ( "Administrators") ) 
{ 

DeleteButton. Visible = false; 

} 

Clearly, this leads to messy code, because you need to repeat each expression evaluation twice: once 
for the True case and once for the False case. Fortunately, there is an easier solution: the Else 

blOCl< (else in C#): 
VB.NET 

If User . IsInRole ( "Administrators" ) Then 

DeleteButton. Visible = True 
Else 

DeleteButton. Visible = False 
End If 

C# 

if (User. IsInRole ( "Administrators" ) ) 
{ 

DeleteButton. Visible = true; 

} 

else 
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{ 

DeleteButton. Visible = false; 

} 

For simple conditions this worl<s fine. But consider a scenario in wliicli you iiave moretiian two 
options. In those scenarios you can useEiseif in VB.N ET or the else if ladder in C#. 

Imagine that your site uses three different roles: administrators, content managers, and standard 
members. Administrators can create and delete content; content managers can only create new con- 
tent, whereas members can't do either of the two. To show or hide the relevant buttons, you can use 
the following code; 

VB.NET 

If User . IsInRole { "Administrators" ) Then 

CreateNewArticleButton. Visible = True 

DeleteArticleButton. Visible = True 
Elself User . IsInRole { "ContentManagers" ) Then 

CreateNewArticleButton. Visible = True 

DeleteArticleButton. Visible = False 
Elself User.IsInRole{"Members") Then 

CreateNewArticleButton. Visible = False 

DeleteArticleButton. Visible = False 
End If 

C# 

if (User. IsInRole ( "Administrators" ) ) 
{ 

CreateNewArticleButton. Visible = true; 
DeleteArticleButton. Visible = true; 

} 

else if {User . IsInRole ( "ContentManagers" ) ) 
{ 

CreateNewArticleButton. Visible = true; 
DeleteArticleButton. Visible = false; 

} 

else if {User . IsInRole ( "Members" ) ) 
{ 

CreateNewArticleButton. Visible = false; 
DeleteArticleButton. Visible = false; 

} 

Although this mal<esyour code a bit more readable, you can still end up with difficult code when 
you have many expressions to test. If that's the case, you can use the select case (VB.N ET) or 
switch (C#) statement. 

Select Case/switch Constructs 

imagine you're building a website for a concert hall that has shows on Saturday. During the weel<, 
visitors can buy ticl<ets online for Saturday's gig. To encourage visitors to buy ticl<ets as early as 
possible, you decideto give them an early-bird discount. The earlier in the weel< they buy their tick- 
ets, the cheaper they are. Your code to calculate the discount percentage can lool< lil<ethis, using a 
Select Case/switch Statement: 
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VB.NET 

Dim today As DateTime = DateTime.Now 
Dim discountPercentage As Double = 0 

Select Case today .DayOf Week 
Case DayOf Week . Monday 

discountPercentage = 40 
Case DayOf Week. Tuesday 

discountPercentage =30 
Case DayOf Week. Wednesday 

discountPercentage =20 
Case DayOf Week. Thursday 

discountPercentage = 10 
Case Else 

discountPercentage = 0 
End Select 

C# 

DateTime today = DateTime.Now; 
double discountPercentage = 0 ; 

switch (today .DayOfWeek) 
{ 

case DayOf Week. Monday : 

discountPercentage = 40; 

break ; 
case DayOfWeek. Tuesday: 

discountPercentage = 30; 

break; 

case DayOf Week. Wednesday : 
discountPercentage = 20; 
break ; 

case DayOf Week. Thursday: 

discountPercentage = 10; 

break ; 
default: 

discountPercentage = 0; 

break ; 

} 

For each day where the discount is applicabie (M onday through Thursday) there is a case bioci<. 
The differences between VB.N ET and C#syntax arequitesmaii: C#usesa iowercasec for case 
and requires a coion after each case iabei. Additionaiiy, you need to exit each bioci< with a break 
statement. At run time, the condition (today. oayof week) is evaluated and the correct blocl< is exe- 
cuted. It's important to understand that only the relevant blocl< is executed, and nothing else. W hen 
no valid block is found (the code is executed on a day between Friday and Sunday), the code in the 
Case Else or default block flres. YouYenot required to write a case Else or default block, 
although it's recommended to do so because it makes your code more explicit and easier to read. 
The preceding examples could have left it out, because discountPercentage already gets a default 
value of 0 at the top of the code block. 

To get a feel for the statements you have seen so far, the following Try It Out exercise shows you 
how to use them in a small demo application. 
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lUylKSJ^] Creating a Simple Web-Based Calculator 

In this exercise you create a simple calculator that is able to add, subtract, multiply, and divide values. 
You see how to use some of the logical and assignment operators and learn to use the if and select 

Case/switch COnstrUCtS. 

1. start by creating a new Web Form called caicuiatorDemo.aspx in the Demos folder. M akesure 
you don't name the page Calculator or you'll run into trouble later in this chapter when you create 
a class by that name. 0 nee again, mal<e sure you're using the Code Behind model and select the 
correct programming language. 

2. Switch the page to Design View, and clicl< in the dashed rectangle to put the focus on it. Choose 
Table o Insert Table from the main menu and add a table with three rows and three columns. 

3. M ergeall three cells of the first row by selecting them with the mouse (either by dragging the 
mouse or by clicl<ing each cell while holding down the Ctrl key), right-clicking the selection, and 
choosing M odify o M erge Cells from the menu that appears. 

4. Add the following controlsto the page, set their ID and other properties as in the following table, 
and arrange the controls as shown in Figure 5-3. 


CONTROL TYPE 

CONTROL ID 

PROPERTY SETTINGS 

Label 

ResultLabel 

Clear its Text property. To do this, right-clicl< the property 
name in the Properties Grid and choose Reset. 

TextBox 

ValueBoxl 


DropDownList 

OperatorList 

Add four list items for the following arithmetic operators 
using the DropDownList's Smart Tasl<s panel. 
+ 

* 
/ 

TextBox 

ValueBox2 


Button 

CalculateButton 

Set the Text property of the button to Calculate. 


When you're done, your page should look like Figure 5-3 in Design View. 
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FIGURE 5-3 
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5. Double-dick the Calculate button and add the following bolded code in the code placeholder that 
VS added for you: 

VB.NET 

Protected Sub CalculateButton_Click (sender As Object, 
e As EventArgs) Handles CalculateButton . Click 
If ValueBoxl. Text. Length > 0 AndAlso ValueBox2 .Text. Length > 0 Then 

Dim result As Double = 0 

Dim valuel As Double = Convert .ToDouble (ValueBoxl .Text) 
Dim value2 As Double = Convert .ToDouble (ValueBox2 .Text) 

Select Case OperatorList . SelectedValue 
Case "+" 

result = valuel + value2 
Case "-" 

result = valuel - value2 
Case "*" 

result = valuel * value2 
Case "/" 

result = valuel / value2 
End Select 

ResultLabel .Text = result. ToStringO 
Else 

ResultLabel .Text = String. Empty- 
End If 

End Sub 

C# 

protected void CalculateButton_Click (obj ect sender, EventArgs e) 
{ 

if (ValueBoxl .Text . Length > 0 && ValueBox2 .Text. Length > 0) 
{ 

double result = 0; 

double valuel = Convert .ToDouble (ValueBoxl . Text) ; 
double value2 = Convert .ToDouble (ValueBox2 . Text) ; 

switch (OperatorList . SelectedValue) 
{ 

case "+": 

result = valuel + value2; 

break; 
case 

result = valuel - value2; 

break; 
case "*": 

result = valuel * value2; 

break; 
case 

result = valuel / value2; 
break; 

} 

ResultLabel .Text = result.ToStringO ; 

} 
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else 
{ 

ResultLabel .Text = string. Empty; 

} 

} 

6. Save all changes and pressCtrl4f5 to open the page in the browser. If you get an error instead of 
seeing the page, make sure you typed the code exactly as shown here, and that you named all con- 
trols according to the table you saw earlier. 

7. Enter a number in the first and second text boxes, choose an operator from the drop-down list, and 
clicl< the Calculate button. The code in the Code Behind fires and then — based on the item you 
selected in the drop-down list — the correct calculation is performed and the label is updated with 
the result. 

8. Go ahead and try some other numbers and operators; you'll see that the calculator carries out the 
right operation every time you clicl< the Calculate button. 

How It Works 

W hen you enter two values and click the Calculate button, the following code in the Code Behind fires; 

VB.NET 

If ValueBoxl. Text. Length > 0 AndAlso ValueBox2 . Text . Length > 0 Then 
C# 

if (ValueBoxl. Text. Length > 0 ScS: ValueBox2 . Text . Length > 0) 

This code is necessary to ensure that both text boxes contain a value. The code uses a simple if 
statement to ensure that both fields have a value. It also uses AndAiso or && to avoid checking the 
Text property of the second Textsox when the first is empty. In Chapter 9 you see a much cleaner 
way to perform this validation. In that chapter you'll also see how to make sure users enter valid 
numbers, as currently the code crashes when you enter anything that cannot be converted to a 

Double. 

The code then declares a Double to hold the result of the calculation and then gets the values 
from the two text box controls, converts the values to aooubie using the ToDoubie method of the 
Convert class, and then sets up a select case (switch in C#) block to handle the type of opera- 
tor you have chosen in the drop-down list: 

VB.NET 

Select Case OperatorList . SelectedValue 
Case "+" 

result = valuel + value2 

C# 

switch (OperatorList . SelectedValue) 
{ 

case " + " : 

result = valuel + value2 ; 
break; 
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For each item in tlie drop-down list, tliere is a case statement. W lien you liave cliosen tlie + 
operator from tlie iist, tlie code in tlie first case bioci< fires, and result is assigned tlie sum 
of tlie numbers you entered in tlie two text boxes. Lii<ewise, wlien you clioose tlie subtrac- 
tion operator, for example, the two values are subtracted from each other. 

At the end, the result is converted to a string and then displayed on the label called 

ResultLabel. 


The Select Case/switch Statements close off the discussion about mal<ing decisions in your code. 
There's one more group of statements left; loops that enable you to loop over code or over objects in 
a collection. 

Loops 

Loops are extremely useful in many applications, because they enable you to execute code repeti- 
tively, without the need to write that code more than once. For example, if you have a website 
that needs to send a newsletter by e-mail to its 20,000 subscribers, you write the code to send the 
newsletter once, and then use a loop that sends the newsletter to each subscriber the code finds in a 
database. 

Loops come as a few different types, each with their own usage and advantages. 
The For Loop 

The For loop simply repeats its code a predefined number of times. You define the exact number of 
iterations when you set up the loop. The For loop tal<es the following format: 

VB.NET 

For counter [ As datatype ] = start To end [ Step stepSize ] 

' Code that must be executed for each iteration 
Next [ counter ] 

C# 

for {startCondition; endCondition; step definition) 
{ 

// Code that must be executed for each iteration 

} 

Thislooksa littleodd, buta concrete example makes thisa lot easier to understand: 

VB.NET 

For loopCount As Integer = 1 To 10 

Labell.Text &= loopCount . ToString { ) & "<br />" 
Next 

C# 

for (int loopCount = 1; loopCount <= 10; loopCount++) 
{ 

Labell.Text += loopCount . ToString { ) + "<br />"; 

} 
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Although the syntax used in both languages is quite different, both code examples perform the same 
action: They write out numbers from 1 to 10 on a Label control. That is, the loop is started by the 
assignment of i to the variable loopcount. N ext, the value is converted to a string and assigned 
to the Label control. Then loopcount isincreased by 1, and theloop continues. Thisgoeson until 
loopcount is 10, and then the loop ends. In this example, hard-coded numbers are used. H owever, 
you can replace the start and end conditions with dynamic values from variables or other objects. 
For example, if you're worl<ing with the roles array you saw earlier, you can write out each role in 
thearray lil<ethis: 

VB.NET 

For loopCount As Integer = 0 To roles. Length - 1 

Labell.Text roles (loopCount) & "<br />" 
Next 

C# 

for (int loopCount = 0; loopCount < roles . Length; loopCount++) 
{ 

Labell.Text += roles [loopCount] + "<br />"; 

} 

Because arrays are zero-based, you need to address the first item with roles (o) in VB.N ET and 
roles [0] in C#. This also means that the loop needs to start at o. The Length property of an 
array returns the total number of items that the array contains. So when three roles are in the 
array. Length returns 3. Therefore, in VB.N ET the code subtracts one from the Length and uses 
that value as the end condition of the loop, causing the loop to run from 0 to 2, accessing all three 
elements. 

The C# example doesn't subtract 1 from the Length, though. Instead it uses the expression: 

loopCount < roles . Length; 

So, as long as loopcount is less than the length of thearray, the loop continues. Again, this causes 
the loop to access all three items, from 0 to 2. 

The previous examples loop by adding i to the loopcount variable on each iteration. To use a 
greater step increase, you use the l<eyword step in VB.N ET, whereas C# enables you to define the 
step size directly in the step definition: 

VB.NET 

For loopCount As Integer = 0 To 10 Step 2 

Labell.Text &:= loopCount . ToString ( ) & "<br />" 
Next 

C# 

for (int loopCount = 0; loopCount <= 10; loopCount = loopCount + 2) 
{ 

Labell.Text += loopCount . ToString ( ) + "<br />"; 

} 

This loop assigns the even numbers between 0 and 10 to the Label control. 

If you are looping over an array or a collection of data, there's another loop at your disposal that's a 
bit easier to read and worl< with: the For Each or foreach loop. 
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The For Each/foreach Loop 

The For Each loop in VB.N ET and the foreach loop in C#simpiy iterate over aii the items in a 
coiiection. Tai<ing the roies array as an exampie, you can execute the foiiowing code to print each 
roie name on the Label controi ; 

VB.NET 

For Each role As String In roles 
Labell.Text &= role & "<br />" 
Next 

C# 

foreach (string role in roles) 
{ 

Labell.Text += role + "<br />"; 

} 

Because the roies variable is an array of strings, you need to set up the ioop with a string as weii, 
as is done with the roie variable. You would changethis variable's type if the collection contained 
items of a different type. 

In addition to the For and the For Each loops, there is one more loop that you need to lool< at: the 

While loop. 

The While Loop 

As its name implies, the while loop isableto loop whilea certain condition istrue. Unlil<etheother 
two loops, which usually end by themselves, the while loop could loop forever if you're not careful. 
It could also not execute at all if its condition is never met. The following example shows how to use 
the while loop: 

VB.NET 

Dim success As Boolean = False 
while Not success 

success = SendEmailMessage ( ) 
End While 

C# 

bool success = false; 

while { ! success) 

{ 

success = SendEmailMessage 0 ; 

} 

This code tries to send an e-mail message using the fictitious SendEmailMessage method and will 
do so until it succeeds — that is, as long as the variable success has the value False (false in C#). 
Note that Not and \ are used to reverse the value of success. The SendEmailMessage method is 
supposed to return True when it succeeds and False when it doesn't. If everything worl<s out as 
planned, the code enters the loop and calls SendEmailMessage. If it returns True, the loop condi- 
tion is no longer met, and the loop ends. H owever, when SendEmailMessage returns False, for 
example because the mail server is down, the loop continues and SendEmailMessage is called 
again. 
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To avoid endless loops with the while loop, it's often a good idea to add a condition that terminates 
the loop after a certain number of tries. For example, the following code helps to avoid an infinite 
loop if the mail server is down: 

VB.NET 

Dim success As Boolean = False 

Dim loopCount As Integer = 0 

While Not success AndAlso loopCount < 3 

success = SendEmailMessage ( ) 

loopCount = loopCount + 1 
End While 

C# 

bool success = false; 

int loopCount = 0 ; 

while (! success loopCount < 3) 

{ 

success = SendEmailMessage 0 ; 
loopCount = loopCount + 1; 

} 

With this code, the variable loopcount is responsible for exiting the loop after three attempts to call 
SendEmailMessage. Instead of using loopCount = loopCount + 1, you Can also use the combi ned 
concatenation and assignment operators, lil<ethis; 

VB.NET 

loopCount += 1 
C# 

loopCount += 1; 

// Alternatively C# enables you to do this: 
loopCount++ ; 

All examples have the same result: the loopcount value is increased by one, after which the new 
total is assigned to loopcount again. 

Besides the While loop, you have a few other alternatives, such as the do while loop (do while in 
C#), which ensures that the code to be executed is always executed at least once, and the do until 
loop (not available in C#), which goes on until a certain condition is true, as opposed to looping 
whilea certain condition istrue, as is the case with thewhiie loop. 

Exiting Loops Prematurely 

It's common to have the need to exit a loop before it has completely finished. You can do this with 
Exit For in VB.N ET and break in C#, lil<ethis: 

VB.NET 

For loopCount As Integer = 1 To 10 
If loopCount = 5 Then 
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Exit For 
End If 

Labell.Text &= loopCount . ToString { ) & "<br />" 
Next 

C# 

for (int loopCount = 1; loopCount <= 10; loopCount++) 
{ 

if (loopCount == 5) 
{ 

break; 

} 

Labell.Text += loopCount .ToString { ) + "<br />"; 

} 

With this code, the label will only show the numbers 1 to 4, as the loop is exited as soon as loop- 
count has reached the value of 5. N ote: This example doesn't have a lot of real-world usage as you 
would rewrite the code to loop four times only, but it shows the concept quite nicely. 

You can use continue For in VB and continue in C#to stop processing the current iteration and 
move on with the next, if available. 

So far, the code you've seen has been comprised of short and simple examples that can be placed 
directly in the Code Behind of a web page; for example, in page_Load or in a Button's ciick han- 
dler that you have seen before. H owever, in real-world websites, you probably want to structure and 
organize your code a lot more. In the next section, you see different ways to accomplish this. 


ORGANIZING CODE 

W hen you start adding more than just a few pages to your website, you're almost certain to end up 
with some code that you can reuse in multiple pages. For example, you may have some code that 
reads settings from the web.config file that you need in multiple files. Oryou want to send an 
e-mail with user details from different pages. So you need to find a way to centralize your code. To 
accomplish this in an ASP.N ET website, you can use functions and subroutines, which are discussed 
next. To make these functions and subroutines available to all thepagesin your site, you need to 
create them in a special location, which is discussed afterward. 


Methods: Functions and Subroutines 

Functions and subroutines (subs) are very similar; both enable you to create a reusable blocl< of code 
that you can call from other locations in your application. The difference between a function and a 
subroutine is that a function can return data, whereas a sub can't. Together, functions and subrou- 
tines are referred to as methods. You'll see that term again in the final part of this chapter that deals 
with object orientation. 

To mal<e functions and subs more useful, they can be parameterized. That is, you can pass in addi- 
tional information that can beused inside the function or subs. Functions and subs generally take 
the following format: 
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VB.NET 

' Define a function 

Public Function FunctionName ( [parameterList] ) As DataType 

End Function 

' Define a subroutine 

Public Sub SubName ( [parameterList] ) 

End Sub 
C# 

// Define a function 

public DataType FunctionName { [parameterList] ) 
{ 

} 

// Define a subroutine 

public void SubName { [parameterList] ) 

{ 

} 

The complete first line, starting with Public, is referred to as the method signature because it 
defines the look of the function, including its name and its parameters. The Public l<eyword (pub- 
lic in C#) is called an access modifier and defines to what extent other web pages or code files can 
see this method. This is discussed in detail later in the chapter. For now, you should realize that 
Public has the greatest visibility, so the method is visibleto any calling code. 

The name of the function is followed by parentheses, which in turn can contain an optional param- 
eter list. The italic parts in these code examples will be replaced with real values in your code. The 
parts between the square bracl<ets ([] ) are optional. To make it a little more concrete, here are some 
examples of functions and subs: 

VB.NET 

Public Function Add (a As Integer, b As Integer) As Integer 

Return a + b 
End Function 

Public Sub SendEmailMessage (emailAddress As String) 

' Code to send an e-mail goes here 
End Sub 

C# 

public int Add(int a, int b) 
{ 

return a + b; 

} 


public void SendEmailMessage (string emailAddress) 
{ 
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// Code to send an e-mail goes here 

} 

In these code examples it's clear that functions return a value, and subs don't. The Add method 
uses the Return l<eyword (return in all lowercase in C#) to return the sum of a and b. The sub in 
VB.N ET and the void method in C#don't require the Return l<eyword, although you can use it to 
exit the method prematurely. 

Finally, both thefunction and subroutine have a parameter list that enables you to definethe name 
and data type of variables that are passed to the method. Inside the method you can access these 
variables as you would access normal variables. In the case of the Add method, you have two param- 
eters; one for the left side of the addition and one for the right side. The sendEmaiiMessage method 
has only a single parameter: a string holding the user's e-mail address. 

In earlier versions of VB.N ET you would seethe keyword Byvai in front of each parameter in the 
parameter list. This is the default type for all parameters, so VS no longer adds it for you. The oppo- 
site of Byvai is ByRef. These keywords determine the way a value is sent to thefunction or subrou- 
tine. W hen you specify Byvai, a copy of the variable is made. Any changes made to that copy inside 
the method are lost as soon as the method finishes. In contrast, when you specify ByRef, a reference 
to the variable is sent to the method. Any changes made to the incoming variable reflect on the origi- 
nal variable as well. The following short example demonstrates how this works: 

Public Sub ByValDemo(someValue As Integer) ' No ByVal needed as it's the default 

someValue = someValue + 20 
End Sub 

Public Sub ByRef Demo (ByRef someValue As Integer) 

someValue = someValue + 20 
End Sub 

Dim X As Integer = 0 
ByValDemo(x) 

Labell.Text = x.ToStringO ' Prints out 0; A copy of x is sent to ByValDemo, 

' leaving the original value of x unmodified. 

Dim y As Integer = 0 
ByRef Demo (y) 

Labell.Text = y.ToStringO ' Prints out 20; A reference to y is sent 

' to ByRefDemo so when that method modified 
' someValue, it also changed the variable y. 

C# has a similar construct using the ref keyword. The biggest difference from VB.N ET is that you 
need to specify the ref keyword in the call to the method as well: 

public void ByRef Demo (ref int someValue) 
{ 

someValue = someValue + 20; 

} 


int y = 0; 

ByRef Demo (ref y) ; 


// Just as in the VB example, y contains 20 
// after the call to ByRefDemo 
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Be careful when using reference parameters like this; before you l<now it the method may change 
important variables in the calling code. This can lead to bugs that are hard to track down. 

To make your sitewide methods accessible to pages in your website, you should pi ace them in a cen- 
tralized location. TheApp_code folder of your website is a perfect location for your code. 

The App_Code Folder 

The App_code folder is a special ASP.N ET folder. It's designed specifically to hold code files, like 
classes that you'll use throughout the site. Code that applies only to one page (I ike the handler of a 
Button control's Click event) should remain in the page's Code Behind, as you have seen so far. 


NOTE The App_code folder is specific to Web Site Projects, tfie project type 
used for the Planet Wrox sample website. Web Application Projects, on the 
other hand, don't use or support an App_code folder However that project type 
enables you to create code files in pretty much any other location. When you 
build sites using the Web Application Project model, you're advised to create 
a central code folder (called code or codeFiies, for example) to store all your 
code files. To follow along with the samples in this and later chapters, it's impor- 
tant that you're using a Web Site Project as explained in Chapter 2. 


To add theApp_code folder to your site, right-click the site's name in the Solution Explorer and 
choose Add o Add ASP.N ET Folder o AppCode. The folder is added to the site and gets a special 
icon, shown in Figure 5-4. 


(2t 'o- 9 * [p] 

Search Solution Explorer (Ctrl+;) •' 


1^ Solution 'Site' (1 project) 


A @ SKe 

t> App_Code 

> 0 Controls 

> 0 Dennos 

I> ^ MasterPages 

> ^ Scripts 
O d Styles 

> %1 Default.aspx 

O packages. config 
iQ Web. config 

FIGURE 5-4 

With theApp_code folder in place, you can start adding class files to it. Class files have an exten- 
sion that matches the programming language you have chosen for the site: .cs for C#files and .vb 
for files containing VB.N ET code. Inside these class files you can create classes that in turn contain 
methods (functions and subroutines) that can carry out common tasks. Classes are discussed in 
more detail in the final section of this chapter; for now, focuson the methods in the code file and 
how they are called, rather than on why you need to add the code to a class first. 

The next exercise shows you how to usethe App_code folder to optimize the calculator you created 
in an earlier Try It 0 ut. 
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TRY IT OUT 


Optimizing tlie Calculator 


In this exercise, you create a class called calculator that exposes four methods: Add, subtract. 
Multiply, and Divide. W hen the class is set up and is capable of performing the necessary computing 
actions, you modify the caicuiatorDemo.aspx file so it uses your new calculator class. Although 
this is a trivial example when it comes to the amount of code you need to write and the added flexibility 
you gain by moving your code from the ASPX page to the App_code folder so it can be reused by other 
applications, it's comprehensive enough to show you the concept, yet short enough to enable you to 
understand the code. For now, just focus on how the calculator works and how to call its methods. In 
the section on object orientation later in this chapter, you see exactly what a class is. 

1. If you haven't already done so, start by adding an App_code folder to your site by right-clicl<ing 
the site and choosing Add c Add ASP.N ET Folder cApp Code. 

2. Right-clicl< this newly created folder and chooseAdd o Add N ew Item. 

3. In thedialog box that follows, select the appropriate programming language, and clicl< Class. 

4. Type calculator as the name of the file and clicl< Add. This creates a class file that in turn con- 
tains a class called calculator. N ote that it's common practice to name classes using what's called 
Pascal casing, where each word starts with a capital letter. 

5. Right after the line of code that defines the calculator class, add the following four methods, 
replacing any code that was already present in the class: 

VB.NET 

Public Class Calculator 

Public Function Add (a As Double, b As Double) As Double 

Return a + b 
End Function 

Public Function Subtract (a As Double, b As Double) As Double 

Return a - b 
End Function 

Public Function Multiply (a As Double, b As Double) As Double 

Return a * b 
End Function 

Public Function Divide (a As Double, b As Double) As Double 

Return a / b 
End Function 

End Class 
C# 

public class Calculator 
{ 

public double Add (double a, double b) 
{ 

return a + b; 

} 


public double Subtract (double a, double b) 
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return a - b; 


public double Multiply (double a, double b) 
return a * b; 

public double Divide (double a, double b) 
return a / b; 

} 

6. N ext, modify the Code Behind of the caicuiatorDemo.aspx page so it uses the class you just cre- 
ated. You need to mal<etwo changes: First you need to add a line of code that creates an instance 
of the Calculator class, and then you need to modify each case block to use the relevant calcula- 
tion methods in the calculator: 

VB.NET 

Dim myCalculator As New Calculator () 

Select Case OperatorList . SelectedValue 
Case "+" 

result = myCalculator. Add (valuel, value2) 

Case "-" 

result = myCalculator . Subtract (valuel, value2) 

Case "*" 

result = myCalculator. Multiply (valuel, value2) 

Case "/" 

result = myCalculator .Divide (valuel, value2) 

End Select 

C# 

Calculator myCalculator = new Calculator () ; 

switch (OperatorList . SelectedValue) 
{ 

case " + " : 

result = myCalculator. Add (valuel, value2) ; 

break; 
case " - " : 

result = myCalculator . Subtract (valuel, value2) ; 

break; 
case "*" : 

result = myCalculator. Multiply (valuel, value2) ; 

break; 
case "/" : 

result = myCalculator .Divide (valuel, value2) ; 

break; 

} 

7. Save all your changes and open the page in the browser. The calculator still worl<s as before; only 
this time the calculations are not carried out in the page's Code Behind file, but by the calculator 
class in theApp_code folder instead. 
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How It Works 

Thefileyou created in theApp_code folder contains a class called calculator. You learn more about 
classes in the final section of this chapter, but for now it's important to l<now that a class is lil<ea defi- 
nition for an object that can expose methods you can call at run time. In this case, the definition for 
the Calculator class Contains four methods to perform arithmetic operations. These methods accept 
parameters for the left-hand and right-hand sides of the calculations. Each method simply carries out 
the requested calculation (Add, subtract, and so on) and returns the result to the calling code. 

The code in the Code Behind of the caicuiatorDemo.aspx page first creates an instance of the 
Calculator class. That is, it creates an object in the computer's memory based on the class definition. 
To do this, it uses the New (new in C#) l<eyword to create an instanceof calculator, which isthen 
stored in the variable mycaicuiator. You learn more about the New l<eyword later in this chapter when 
objects are discussed. N ote that the data type of this variable is calculator, the name of the class. 

VB.NET 

Dim myCalculator As New Calculator!) 
C# 

Calculator myCalculator = new Calculator () ; 

0 nee the calculator instance is created, you can call its methods. Just as you saw earlier with other 
methods, the methods of the calculator class accept parameters that are passed in by the calling code: 

VB.NET 

Case "+" 

result = myCalculator .Add (valuel , value2) 
C# 

case " + " : 

result = myCalculator .Add{valuel, value2) ; 
break; 

The Add method then adds the two values and returns the result asa Double, which isstored in the 
variable result. J ust as in the first version of the calculator, at the end the result is displayed on the 
page with a Label control. 


Functions and subroutines area great way to organize your web application. They enable you to 
create reusable blocl<s of code that you can easily call from other locations. Because code you need 
more than once is defined only once, it's much easier to maintain or extend the code. If you find a 
bug in a function, simply fix it in its definition in theApp_code folder, and all pages using that func- 
tion automatically benefit from the change. In addition to theincreased maintainability, functions 
and subs also make your code easier to read: Instead of wading through long lists of code in a page, 
you just call a single function and worl< with the return value (if any). This mal<es the code easier on 
your brain, minimizing thechance of bugsin your application. 

Functions and subs are not the only way to organize code in your .N ET projects. Another common 
way to organize things is to use namespaces. 
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Organizing Code witli Namespaces 

N amespaces seem to cause a lot of confusion with new developers. They thinl< they're scary, they 
thinl< way too many of them exist, or they don't seethe need to use them. N one of this is true, and 
with a short explanation of them, you'll understand and maybe even I il<e namespaces. 

N amespaces are intended to solve two major problems: to organize the enormous amount of func- 
tionality in the .N ET Frameworl< and in your own code, and to avoid namecollisions, where two 
different types share the same name. 0 ne common misconception about namespaces is that there is 
a direct relation with .N ET assemblies (files with a .dii extension that are loaded and used by the 
.N ET Framework), but that's not the case. Although you typically find namespaces lil<e system 
.web.ui in a DLL called system. web.dii, it's possible (and common) to have multiple namespaces 
defined in a single DLL or to have a namespace be spread out over multiple assemblies. Keep that in 
mind when adding references to assemblies, as explained later. 

To seewhata namespace looks I il<e, open one of theCode Behind files of the A SPX pages you've 
created so far. You'll see something similar to this: 

VB.NET 

Partial Class Demos_CalculatorDemo 
Inherits Sys tern. Web. UI .Page 

C# 

public partial class Demos_CalculatorDemo : Sys tern. Web .UI . Page 

{ 

Note that the definition of the class name is followed by the inherits keyword in VB and a colon in 
C#, which in turn are followed by system, web.ui .page. You see later what this inherits keyword 
is used for. In this code. Page is the name of a class (a data type), which is defined in the system 
.Web.ui namespace. By placing the Page class in the system. web.ui namespace, developers (and 
compilers) can see this class is about a web page. By contrast, imagine the following (fictitious) class 
name: 

Microsoft . Word . Document . Page 

This code also refers to a page class. H owever, because it's placed in the Microsoft .word 
.Document namespace, it's easy to see that it's referring to a page of a Word document, not a web 
page. This way there is no ambiguity between a web pageand a Word document page. This in turn 
helps the compiler understand which class you are referring to. 

Another benefit of namespaces is that they help you find the right data type. Instead of displaying 
thousands and thousands of items in the Intel 11 Sense list, you get a few top-level namespaces. W hen 
you choose an item from that list and press the dot key (.), you get another relatively short list with 
types and other namespaces that live insidethe chosen namespace. 

N amespaces are nothing more than simple containers that you can refer to by name using the dot 
notation. They are used to prefix each data type that is available in your application. For example, 
the Double data type lives in the system namespace, thus its fully qualified name is system 
.Double. Likewise, the Button control you've added to your web pages lives in the system, web 

.UI .WebControls namespace, thus its full name is system. web. UI .WebControls .Button. 
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It's also easy to create your own namespaces. As long as they don't collide with an existing name, 
you can pretty much make up your own namespaces as you see fit. For example, you could wrap the 
Calculator class In the following namespace (In calculator .vb or caicuiator.es In App_code): 

VB.NET 

Namespace Wrox. Samples 

Public Class Calculator 

End Class 

End Namespace 
C# 

namespace Wrox. Samples 
{ 

public class Calculator 
{ 

} "' 

} 

With the calculator wrapped In this namespace, you could createa new Instanceof It llkethls: 

VB.NET 

Dim myCalculator As New Wrox. Samples . Calculator ( ) 
C# 

Wrox. Samples . Calculator myCalculator = new Wrox. Samples . Calculator () ; 

Although you get some help from Intel 1 1 Sense to find the calculator class, typing these long names 
becomes boring after a while. Fortunately, there's a fix for that as well. 

After you have created your own namespaces, or If you want to use existing ones, you need to make 
them available In your code. You do this with the keyword imports (In VB.N ET) or using (In C#). 
For example, to make your calculator class available In the Calculator demo page without specify- 
ing Its full name, you can add the following namespace to your code: 

VB.NET 

Imports Wrox. Samples 

Partial Class Demos_CalculatorDemo 
Inherits System. Web .UI . Page 

C# 

using Wrox. Samples; 

public partial class Demos_CalculatorDemo : System. Web .UI . Page 
{ 

With this Imports/using Statement In place, you can now simply use calculator again Instead of 

Wrox . Samples . Calculator. 


186 I CHAPTERS PROGRAMMING YOUR ASP.NET WEB PAGES 


If you are using C#, you'll see a number of using statements by default in the Code Behind of 
an ASPX page for namespaces lil<e system and system. web. ui .webcontrois. If you're using 
VB.N ET, you won't see these references. Instead, with a VB.N ET website, the default namespaces 
are included in the machine's global web. config file under the <namespaces> element. 

Q uite often, you l<now the name of the class, but you don't l<now the namespace it lives in. VS 
mal<es it very easy to find the namespace and add the required imports or using statement for you. 
Simply type the name of the class you want to useand then place the cursor in the class name and 
press Ctrl +. (Ctrl 40 ot). You see a menu appear that lets you select the right namespace, as shown in 
Figure 5-5. 



SmtjjClient nyClient = new SnitgClijent(); 


Q- 


*l ) using System.Net.Mail; js^ 
System. Net.Mail.SmtpClient 





Generate class for "SmtpClienf 



Generate new type... 



FIGURE 5-5 


If the dialog box doesn't offer to add an imports or using statement, the assembly that contains 
the class you're lool<ing for may not be referenced by the project. If that's the case, right-clicl< the 
website in the Solution Explorer and choose Add Reference. In the dialog box that follows you can 
choose from the many built-in .N ET assemblies on the .N ET tab or browse to a third-party assem- 
bly using the Browse button. Once the reference is added you should be able to add an imports or 
using Statement for the class you're lool<ing for by pressing Ctrl-f-. again on the class name. 

0 nee you start writing lots of code, you may quicl<ly forget where you declared what, or what a 
variable or method is used for. It'stherefore wholeheartedly recommended to put comments in your 
code. 

Writing Comments 

N 0 matter how clean a coder you are, it's lil<ely that someday you will run into code that mal<esyou 
raise your eyebrows and thinl<, "W hat on earth is this code supposed to do?" Over the years, the 
way you program will change; you'll learn new stuff, optimize your coding standards, and find ways 
to code more efficiently. To make it easier for you to recognize and understand your code now and 
two years from now, it's a good idea to comment your code. You have two main ways to add com- 
ments in your code files: inline and asX M L comments. 

Commenting Code Inline 

Inline comments are written directly in between your code statements. You can use them to com- 
ment on existing variables, difficult loops, and so on. In VB.N ET, you can comment out only one 
line at a time using theticl< (■) character, which you place in front of the text that you want to use as 
a comment. To comment a single line in C#, you use two slashes (//). Additionally, you can use /* 
and */ to comment out an entire block of code in C#. The following examples show some different 
uses of comments; 
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VB.NET 

' Usage: explains the purpose of variables, statements and so on. 
' Used to store the number of miles the user has traveled last year. 
Dim distancelnMiles As Integer 

' Usage: comment out code that's not used (anymore) . 
' In this example, SomeUnf inishedMethod is commented out 
' to prevent it from being executed. 
' SomeUnfinishedMethodO 

' Usage: End of line comments. 

If User . IsInRole ( "Administrators" ) Then ' Only allow admins in this area 
End If 

C# 

// Usage: explains the purpose of variables, statements and so on. 

// Used to store the number of miles the user has traveled last year. 

int distancelnMiles; 

// Usage: comment out code that's not used (anymore). 

// In this example, SomeUnf inishedMethod is commented out 

// to prevent it from being executed. 

// SomeUnfinishedMethodO; 

// Usage: End of line comments. 

if (User.IsInRole("Administrators")) // Only allow admins in this area 

{ } 

/* 

* This is a block of comments that is often used to add additional 

* information to your code, for example to explain a difficult loop. You can 

* also use this to (temporarily) comment a whole block of code. 
*/ 

To comment out the code, simply type the code character (' or //) at the location where you want 
the comment to start. To comment out a block of code, select it in the text editor and press Ctrl+K 
followed by Ctrl-fC. Similarly, press Ctrl+K followed by Ctrl-RJ to uncomment a selected block of 
code. 

Alternatively, you can choose Edit o Advanced oComment Selection or Uncomment Selection from 
the main menu. 

Inline comments are usually good for documenting small details of your code. H owever, it's also a 
good idea to provide a high-level overview of what your code does. For example, for a method called 
sendEmaiiMessage it would be good to have a short description that explains what the method does 
and what the parameters are used for. This is exactly what XML comments are used for. 

Writing XML Comments 

XML comments are comments that you add asX M L elements (using angle brackets: < >) in your 
code to describe its purpose, parameters, return value, and more. The VS IDE helps you by writing 
these comments. All you need to do is position your cursor on the linejust before a class or method 
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and type ■ ' ' (three tick characters) forVB or /// (three forward slashes) for C#. Assoon as you do 
that, the IDE inserts XML tags for the summary and, optionally, the parameters and return type 
of a method. Once again, consider a sendEmaiiMessage method. It could have two parameters of 
type string: one for the e-mail address to send the message to, and one for the mail body. With the 
XML comments applied, the method could lool< lil<ethis; 


VB.NET 

' ' ' <summary> 

''' Sends out an e-mail to the address specified by emailAddress . 
''' </summary> 

''' <param name="emailAddress">The e-mail address of the recipient .</param> 
''' <param name="mailBody">The body of the mail message .</param> 
' ' ' <returns>This method returns True when the message was sent successf ully; 
''' and False otherwise .</returns> 

''' <remarks>Attention: this method assumes a valid mail server is 
''' available .</remark;s> 

Public Function SendEmaiiMessage (emailAddress As String, 
mailBody As String) As Boolean 
' Implementation goes here 
End Function 

C# 

/// <summary> 

/// Sends out an e-mail to the address specified by emailAddress. 
/// </summary> 

/// <param name="emailAddress">The e-mail address of the recipient .</param> 
/// <param name="mailBody">The body of the mail message .</param> 
/// <returns>This method returns true when the message was sent successfully; 
/// and false otherwise .</returns> 

/// <remarks>Attention: this method assumes a valid mail server is 
/// available. </remarks> 

public bool SendEmaiiMessage (string emailAddress, string mailBody) 
{ 

// Implementation goes here 

} 

The cool thing about this type of commenting is that the comments you type here show up in 
Intel 11 Sense in the code editor when you try to call the method (see Figure 5-6). 


SendEmaiiMessage ( 
bool Helper5.SendEmailMe5S3ge(string emailAddress, string mailBody) 
Sends out an e-mail to the address specified by emailAddress. 
emailAddress: The e-mail address of the recipient 

FIGURE 5-6 


This makes it much easier for you and other developers to understand the purpose of the method 
and its parameters. 

In addition to aiding development in the code editor, you can also usetheXM L comments to create 
good-looking, M SDN -like documentation. A number of third-party tools are available that help you 
with this, including M icrosoft's own Sandcastle (http://msdn.microsoft.com/ en-US /vstudio/ 

bb608422 .aspx) and DoCUment! X from InnOVasyS (www. innovasys.com/). 


Object Orientation Basics | 189 


OBJECT ORIENTATION BASICS 

A chapter about writing code in ASP.N ET wouldn't be complete witliout a section on object ori- 
entation (0 0 ). Object orientation, or object-oriented programming, is a highly popular style of 
programming where the software is modeled as a set of objects interacting with each other. Object 
orientation is at the heart of the .N ET Framework. Literally everything inside the framework is an 
object, from simple things like integers to complex things like a DropDownList control, a connection 
to the database, or a data-driven control. 

Because object orientation is such an important aspect of .N ET, it's important to be familiar with 
the general concepts of object-oriented programming. At the same time, you don't have to bean 
expert on 00 to be able to build websites with ASP.N ET. This section gives you a 10,000-foot over- 
view of the most important terms and concepts. This helps you get started with object orientation, 
so you can start building useful applications in the next chapter instead of keeping your nose in the 
books for the next three weeks. 

Important OO Terminology 

In object orientation, everything revolves around the concept of objects. In 00 everything is, in 
fact, an object. But what exactly is an object? And what do classes have to do with them? 

Objects 

0 bjects are the basic building blocks of object-oriented programming languages. Just I ike in the real 
world, an objectin 00-land isathing, but stored in the computer's memory It can bean integer holding 
someone's age or an open database connection to a SO L Server located on the other side of the world, 
but it can also be something more conceptual, likea web page. In your applications, you createa new 
object with the New (new \r\C#i keyword, as you saw with the calculator example. This process of creat- 
ing new objects is called instantiating and the objects you create are called instances. You can instantiate 
complex or custom types like calculator, as well as simple types like integers and strings: 

VB.NET 

Dim myCalculator As Calculator = New Calculator!) 

Dim age As Integer = New Integer () 
C# 

Calculator myCalculator = new Calculator () ; 
int age = new int ( ) ; 

Because it's so common to create variables of simple types like integer (int in C#) and string 
(string in C#), the Compiler allowsyou to leave out the new keyword and the assignment. 
Therefore, the following code is functionally equivalent to the preceding age declaration: 

VB.NET 

Dim age As Integer 
C# 

int age ; 


190 I CHAPTERS PROGRAMMING YOUR ASP.NET WEB PAGES 


All data types listed at the beginning of this chapter except system. object can be created without 
the New l<eyword. 

Once you have created an instance of an object, such as the mycaicuiator object, it's ready to 
be used. For example, you can access its methods and properties to do something useful with the 
object. But before you lool< at methods and properties, you need to understand classes. 

Classes 

Classes are the blueprints of objects. Just as you can use a single blueprint to build a bunch of simi- 
lar houses, you can use a single class to create multiple instances of that class. So the class acts as 
the definition of the objects that you use in your application. At its most basic form, a class lool<s 
like this: 

VB.NET 

Public Class ClassName 

End Class 
C# 

public class ClassName 

{ 

} 

Because this code simply defines an empty class, it cannot do anything useful. To give the class some 
behavior, you can give it fields, properties, methods, and constructors. In addition, you can let the 
class inherit from an existing class to give it a head start in terms of functionality and behavior. 
You'll come to understand these terms in the next couple of sections. 

Fields 

Fields are simple variables declared at the class level that can contain data. They are often used as 
backing variables for properties (as you'll see in the next section), but that doesn't have to be the 
case. H ere's a quick example of a field in a person class: 

VB.NET 

Public Class Person 

Private _firstName As String 
End Class 

C# 

public class Person 
{ 

private string _firstName; 

} 

Fields are often marked as private (private in C#), which makes them visible only in the class that 
defines them. If you have the need to expose fields to other classes as well, you should use proper- 
ties, which are discussed next. Later in the chapter you learn more about the private keyword and 
other access modifiers. 
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Properties 

Properties of an object are the characteristics the object has. Consider a Person object. W hat i<incl 
of properties does a person have? It's easy to come up with many different characteristics, but the 
most common are: 

>" First name 

>" Last name 

Date of birth 

You define a property in a class with the property l<eyword (in VB.N ET) or with a property header 
similar to a method in C#. In both languages, you use a Get block (get in C#) and a set block 
(set in C#) to define the so-called getters and setters of the property. The getter isaccessed when 
an object is asked for the value of a specific property, and the setter is used to assign a value to the 
property. Properties only provide access to underlying data stored in the object; they don't contain 
the actual data. To store the data, you need what is called a backing variable. This is often a simple 
field defined in the class that is able to store the value for the external property. In the following 
example, the variable _firstName isthe backing variablefor the FirstName property: 

VB.NET 

Public Class Person 

Private _firstName As String 
Public Property FirstName () As String 
Get 

Return _firstName 
End Get 

Set (value As String) 
_firstNaine = value 
End Set 
End Property- 
End Class 

C# 

public class Person 
{ 

private string _f irstName; 
public string FirstName 
{ 

get { return _firstName; } 
set { _firstName = value; } 

} 

} 

It is common to prefix the private backing variables with an underscore, followed by the first word in 
all lowercase, optionally followed by more words that start with a capital again. So the FirstName 
property has a backing variable called _f irstName, LastName has one called _iastName, and so on. 
This way, all variables that apply to the entire class are nicely packed together in the Intel I iSense list. 
Simply type an underscore in your code and you'll get the full list of private variables. N otethat the 
underscore is typically not used when defining variables inside a function or a subroutine. 
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Just I ike the public keyword you saw earlier, private is aiso an access modifier. You iearn more 
about access modifiers iater in tiiis cliapter. 

Ttie main reason for a property in a dass is to encapsulate data. Tiie idea is tiiat a property enables 
you to control thedata that is being assigned to it. This way, you can perform validation or manipu- 
lation of the data before it's stored in the underlying backing variable. Imagine that one of the busi- 
ness rules of your application states that all first names must be written with the first letter as a 
capital. In non- object-oriented languages, the developer setting the name would have to keep this 
rule in mind every time a variable was filled with a first name. In an 0 0 approach, you can make 
the FirstName property responsible for this rule so others don't have to worry about it anymore. 
You can do this type of data manipulation in the setter of the property: 

VB.NET 

Set (value As String) 

If Not String. IsNullOrEmpty (value) Then 

_firstName = value. Substring(0, D.ToUpperO & value. Substring (1) 
Else 

_firstName = String. Empty- 
End If 

End Set 

C# 

set 
{ 

if ( ! string. IsNullOrEmpty (value) ) 
{ 

_firstName = value. Substring (0, D.ToUpperO + value. Substring(l) ; 

} 

else 
{ 

_firstName = string . Empty; 

} 

} 

This code demonstrates that in both VB.N ET and C#, the value parameter is accessible, just as a 
parameter is accessible to a method. The value parameter contains the value that is being assigned 
to the property. In VB.N ET, the value parameter is defined explicitly in the property's setter. In C# 
it's not specified explicitly, but you can access it nonetheless. 

The code first checks if the value that is being passed is not Nothing (nuii in C#) and that it 
doesn't contain an empty string, using the handy string. isNuiiorEmpty method. 

Thecodein the if block then takes the first letter of value, using the substring method of the 
string class, to which it passes the values o and i. The o indicates the start of the substring and the i 
indicates the length of the string that must be returned. String indexing is zero-based as well, so a start 
of 0 and a length of i effectively returns the first character of the value parameter. Thischaracter is 
then changed to uppercase using Toupper o . Finally, the code takes the remainder of the value param- 
eter using Substring again and assigns the combined name back to the backing variable. In this call to 
Substring, Only the Start i ndex is passed, which returns the string from that position to the end. 

You can now use code that sets the name with arbitrary casing. But when you try to access the name 
again, the first name will always begin with a proper first character: 
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VB.NET 

Dim myPerson As Person = New PersonO ' Create a new instance of Person 
myPerson.FirstName = "imar" ' Accessing setter to change the value 


Labell.Text = myPerson.FirstName 
C# 

Person myPerson = new PersonO; 
myPerson.FirstName = "imar"; 

Labell.Text = myPerson.FirstName; 


Accessing getter that now returns Imar 


// Create a new instance of Person 

// Accessing setter to change the value 

// Accessing getter that now returns Imar 


For simple properties tliat don't need any data manipulation or validation, you can use so-called 
automatic properties. With these properties, you can use a much more condensed syntax without 
the need for a private bacl<ing variable. W hen the code is compiled, the compiler creates a hidden 
bacl<ing variablefor you, and you'll need to refer to the public property. H ere's the Dateof Birth 
property of the Person class, written as an automatic property; 


VB.NET 

Public Property DateOfBirth As DateTime 
C# 

public DateTime DateOfBirth { get; set; } 

The Visual Basic implementation of automatic properties has one advantage over the C# ver- 
sion: You can declare the property and give it a value in one shot. The following snippet defines a 
createoate property and assigns it with the current date and time: 


VB.NET 

Public Property CreateDate As DateTime = DateTime. Now 

To assign a default valueto an automatic property in C#, you need to set its value using construc- 
tors, which are discussed later. 

If you later decide you need to write code in the getter or the setter of the property, it's easy to 
extend the relevant code blocks without breal<ing your existing applications. Until that time, you 
have nice, clean property definitions that don't clutter up your class. 

Creating Read-Only and Write-Only Properties 

At times, read-only or write-only properties mal<ea lot of sense. For example, the ID of an object 
could be read-only if it is assigned by the database automatically. W hen the object is constructed 
from the database, the ID is assigned to the private bacl<ing variable. The public id property is then 
made read-only to stop calling code from accidentally changing it. Likewise, you can have a write- 
only property for security reasons. For example, you could have a password property on a person 
object that you can only assign to if you know it, but no longer read it afterward. Internally, code 
within the dass can still access the backing variables to work with the password value. Another 
good candidate for a read-only property is one that returns a combination of data. Consider a 
FuiiName property of a person class that returns a combination of the pirstName and LastName 
properties. You use the setter of each individual property to assign data, but you can have a read- 
only property that returns the concatenated values. 
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Read-only or write-only properties in C#are simple: Just leave out the setter (for a read-only prop- 
erty) or the getter (for a write-only property). VB.N ET is a bit more verbose and wants you to spec- 
ify the l<eyword Readonly or writeoniy explicitly. The following code snippet shows a read-only 
FuiiName property in both VB.N ET and C#: 

VB.NET 

Public Readonly Property FullName{) As String 
Get 

Return _firstName & " " & _lastName 
End Get 
End Property 

C# 

public string FullName 
{ 

get { return _firstName + " " + _lastName; } 

} 

When you try to assign a value to a read-only property, you'll get a compilation error in VS. 
Similar to properties, objects can also have methods. 

Methods 

If properties are the things that a class has (its characteristics), then methods are the things a class 
can do or the operations it can perform. A car class, for example, has properties such as Brand, 
Model, and Color. Its methods could be Drive ( ) , Brake ( ) , and openDoors ( ) . M ethods give objects 
the behavior that enables them to do something. 

You have already seen methods at work earlier, when this chapter discussed some ways to write 
organized code using subs and functions. You simply add methods to a class by writing a function 
or a sub between the start and end elements of the class. For example, imagine the person class has 
a Save method that enables the object to persist itself in the database. The method's signature could 
lool< lil<ethis; 

VB.NET 

Public Class Person 
Public Sub SaveO 

' Implementation goes here 
End Sub 

End Class 

C# 

public class Person 
{ 

public void SaveO 
{ 

// Implementation goes here 

} 

} 

If you want to call the Save method to have the Person object save itself to the database, you create 
an instance of it, set the relevant properties such as FirstName, and then call save: 
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VB.NET 

Dim myPerson As Person = New Person { ) 
myPerson. FirstName = "Jim" 
myPerson . Save ( ) 

C# 

Person myPerson = new Person ( ) ; 
myPerson. FirstName = "Jim"; 
myPerson . Save ( ) ; 

The Save method would then know how to save the person in the database. 

M ethodscan also have parameters, as you saw earlier in the section on X M L comments. The 
sendEmaiiMessage method acceptstwo parameters — one for the e-mail address and one for the 
message body — whose values are then accessible from within the method. 

N otethat a new instance of the person class is created with the New (new in C#) l<eyword followed 
by the class name. W hen this code fires, it calls the object's constructor, which is used to create 
instances of objects. 

Constructors 

Constructors are special methods in a class that help you create an instance of your object. They run 
as soon as you try to create an instance of a class, so they area great place to initialize your objects 
to some default state. Earlier you learned that you create a new instance of an object using theNew 
(new in C#) l<eyword: 

VB.NET 

Dim myCalculator As Calculator = New Calculator!) 
C# 

Calculator myCalculator = new Calculator () ; 

TheNew keyword is followed by the object's constructor: the name of the class. By default, when you 
create a new class file in VS, you get a default constructor for C#but not for VB.N ET. That's not 
really a problem, though, because the compiler generates a default constructor for you if no other 
constructor exists. A default constructor has no arguments and takes the name of the class in C# 
and the reserved keyword New in VB.N ET: 

VB.NET 

Public Class Person 
Public Sub New() 

End Sub 
End Class 

C# 

public class Person 
{ 

public Person 0 
{ 


} 

} 
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Although this default constructor Is nice for creating standard Instances of your classes, sometimes 
It Is really useful to be able to send some Information Into the class up front, so It's readily available 
as soon as It Is constructed. For example, with the person class. It could be useful to pass In the 
first and last names and the date of birth to the constructor so that data Is available Immediately 
afterward. To enable this scenario, you can create a specialized constructor. To have the constructor 
accept the names and the date of birth, you need the following code: 

VB.NET 

Public Sub New (f irstName As String, lastName As String, dateOf Birth As DateTime) 

_firstName = firstName 

_lastName = lastName 

_dateOfBirth = dateOfOirth 
End Sub 

C# 

public Person (string firstName, string lastName, DateTime dateOfBirth) 
{ 

_f irstName = firstName; 
_lastName = lastName; 
_dateOfBirth = dateOfBirth; 

} 

W Ith this code, you can create a new person object: 

VB.NET 

Dim myPerson As Person = New Person ( "Imar" , "Spaanjaars" , New DateTime (1971 , 8, 9)) 
C# 

Person myPerson = new Person (" Imar" , "Spaanjaars", new DateTime (1971, 8, 9)); 

The constructor accepts the values passed to It and assigns them to the private backing variables, so 
right after this line of code, themyperson object Is fully Initialized. 

You can have multiple constructors for the same class, as long as each one has a different method 
signature. 

Visual Basic supports a slightly different syntax to declare and Initialize an object In one fell swoop 
using theoim myvariabie As New ciasswame Syntax. T he fol low I ng code Is equivalent to the pre- 
vious Instantiation of a person Instance: 

Dim myPerson As New Person (" Imar " , "Spaanjaars", New DateTime ( 1971 , 8, 9)) 

In addition to constructors, .N ET offers another quick way to create an object and Inltlallzea few 
properties: object Initializers. W Ith an object Initializer, you provldethe Initial values for some of 
the properties at the same time you declare an Instance of your objects. The following code creates a 
Person object and assigns It a value for the FirstName and LastName properties: 

VB.NET 

Dim myPerson As New PersonO With {.FirstName = "Imar", .LastName = "Spaanjaars"} 
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C# 

Person myPerson = new PersonO { FirstName - "Imar", LastName = "Spaanjaars" }; 

In VB.N ET, you need the with keyword in front of the properties list. In addition, you need to pre- 
fix each property name with a dot (.). Other than that, the syntax is the same for both languages. 
Object initializers are great if you need to set a bunch of properties on an object quicl<ly without 
being forced to write specialized versions of the constructors. 

Although it's useful to have this person class in your application, at times you may need specialized 
versions of a person. For example, your application may require classes lil<e Employee and student. 
W hat should you do in this case? Create two copies of the person class and name them Employee 
and student, respectively? 

Although this approach certainly works, it has a few large drawbacks. The biggest problem is the 
duplication of code. If you decide to add a sociaisecurityNumber property, you now need to add it 
in multiple locations: in the general person class and in the Employee and student classes. 0 bject 
inheritance, a major pillar of object orientation, is designed to solve problems of this kind. 

Inheritance 

Earlier you learned that system. object isthe parent of all other data types in .N ET, including 
all the built-in types and types that you define yourself, meaning that each type in .N ET (except 
Object itself) inherits from object. 0 neof the benefits of inheritance is that you can define a 
behavior at a high level (for example in the object class) that is available to inheriting classes auto- 
matically without the need to duplicate that code. In the .N ET Framework, the object class defines 
a few members that all other objects inherit, including theTostringo method. 

To let one class inherit another, you need to use the inherits keyword in 
VB.N ET and the colon (:) in C#, as shown in the following example that 
defines a student class that inherits person: 

VB.NET 

Public Class Student 
Inherits Person 

C# 

public class Student : Person 
{ 
} 

To see how inheritance works, think again about the Person class shown in 
earlier examples. That class had a few properties, such as FirstName and 
LastName, and a Save method. But if it is inheriting from object, does it 
also have a Tostringo method? You bet it does. Figure 5-7 shows the rela- 
tionship between the object class and the Person class that inherits from 

Object. 
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Figure 5-7 shows that person inherits from object (indicated by the arrow pointing in the direction 
of the ciass that is being inherited from), which in turn means that a person instance can do what- 
ever an Object can do. So, for exampie, you can caii TostringO on your person object: 

Labell.Text = myPerson . ToString ( ) ' Writes out Person 

The defauit behavior of the Tostring o method defined in object is to say its own ciass name. In 
the preceding exampie, it means that the person ciass inherits this behavior and thus says person 
as its name. Usuaiiy, this defauit behavior is not enough, and it wouid be much more usefui if the 
Person couid return thefuii name of the person it is representing, for exampie. You can easiiy do 
this by overriding theTostringO method. Overriding a method or property redefines the behav- 
ior the ciass inherits from its parent ciass. To override a method you usethei<eyword overrides 
in VB.N ET and override in C#. Thefoiiowing snippet redefines the behavior of Tostring in the 

Person CiaSS! 
VB.NET 

Public Overrides Function ToString () As String 

Return FullName & ", born at " & _dateOf Birth . ToShortDateString ( ) 
End Function 

C# 

public override string ToString () 
{ 

return FullName + ", born at " + _dateOf Birth . ToShortDateString () ; 

} 

With this definition of Tostring in the person ciass, it no ionger returns the word Person, but now 
returns thefuii name of the person it is representing: 

Labell.Text = myPerson . ToString ( ) ' Imar Spaanjaars, born at 8/9/1971 

N otice how the code uses the read-oniy PuiiName property to avoid coding the iogic of concatenat- 
ing the two names again. You can't just override any method member you want to. For a method 
to be overridabie, the parent ciass needs to mari< the member with thei<eyword virtual (in C#) or 

Overridable (in VB.N ET). 

Object inheritance in .N ET enabies you to create a hierarchy of objects that enhance, or add func- 
tionaiity to, other objects. This enabies you to start out with a generic base ciass (object). Other 
dassescan then inherit from this ciass, adding speciaiized behavior. If you need even morespeciai- 
ized dasses, you can inherit again from the ciass that inherits from object, thus creating a hierar- 
chy of ciasses that i<eep getting more speciaiized. This principie wori<sfor many ciasses in the .N ET 
Framewori<, inciuding the Page ciass. You may not reaiize it, but every ASPX page you create in VS 
is actuaiiy a ciass that inherits from the ciass system, web. ui .page. This page d ass in turn inher- 
its from Tempiatecontroi, which inherits from control, which inherits from object. The entire 
hierarchy is shown in Figure 5-8. At the bottom you seethe ciass MywebPage, which couid be a Code 
Behind ciass of a page such as MywebPage . aspx. 


Object Orientation Basics | 199 


ObiMt 

<3 


Control 
diss 

■<3 


TemplateContmt V 

Abstract Class 
^Control 


Page 


^ TemplateControl 


MyWebPage 

Class 
Page 


FIGURE 5-8 


In Figure 5-8 you can see that Tempiatecontroi is an abstract class — a class tliat cannot be 
instantiated; that is, you cannot use New (new in C#) to create a new instance of it. It serves solely as 
a common base class for others (lil<e page) that can inherit from it. The exact classes between page 
and Object are not really relevant at this stage, but what's important is that your page inherits all 
the behavior that the page class has. The fact that all your ASPX pages inherit from page is more 
useful than you may thinl< at first. Because it inherits from page, you get loads of properties and 
methods defined in this class for free. For example, the page class exposes a Title property that, 
when set, ends up as a <titie> element in the page. Your page can simply set this property, and the 
parent page class handles the rest for you: 


VB.NET 

Title = "Beginning ASP.NET 4.5 in C# and VB from Wrox" 
C# 

Title = "Beginning ASP.NET 4.5 in C# and VB from Wrox" ; 

You use inheritance in the next chapter when you create a easepage class that serves as the parent 
class for most of the pages you create in the Planet Wrox website. 

In earlier examples, including the override for the Tostringo method, you have seen the l<eyword 
Public. Additionally, when creating bacl<ing variables, you saw the keyword private. These l<ey- 
words are called access modifiers and determine the visibility of your code. 
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Access Modifiers 

Earlier in tliis cliapter I mentioned tliata core concept of 0 0 is encapsulation. By creating members 
such as functions and properties, you mal<e an object responsible for the implementation. Other 
objects interacting with this object consider those methods and properties as black boxes. That is, 
they pass some data in and optionally expect some result back. H ow the method performs its work 
is of no interest to them; it should just work as advertised. To enable an object to shield some of its 
inner operations, you need a way to control access to types and members. You do this by specify- 
ing an access modifier in front of the class, property, or method name. The following table lists the 
available access modifiers for C#and VB.N ET and explains their purpose. 


c# 

VB.NET 

Description 

public 

Public 

The class or member can be accessed from everywhere, Including code 
outside the current application. 

protected 

Protected 

Code with a protected access modifier Is available only within the type 
that defines It or within types that inherit from it. For example, a protected 
member defined In the Page class Is accessible to your ASPX page 
because It Inherits from Page. 

Internal 

Friend 

Limits the accessibility of your code to other code within the same assem- 
bly. An assembly Is a set of one or more compiled code files (either an 
. exe or a . dll file) containing reusable .NET code. 

private 

Private 

A class or member that Is accessible only within the type that defines 


It. For example, with the Person class, the _f irstName variable is 
accessible only from within the Person class. Other code, like an ASPX 
page, cannot access this field directly, and needs to access the public 
FirstName property to get or set the first name of a person. 


Of these four access modifiers, only protected and internal (protected and Friend in VB) can 
be combined. The other two must be used separately. By combining protected and internal, you 
can create members that are accessible by the current class and any class that inherits from it in the 
current assembly only. 

Using access modifiers, you can now create properties that are read-only for external code but that 
can still beset from within the class by marking the getter as private. 

Aswith some of the other 00 concepts, you won't be spending half your day specifying access 
modifiers in your code. H owever, it's good to know that they exist and what they do. That way, 
you may have a clue as to why sometimes your classes don't show up in thelntelliSenselist. There's 
a fair chance you forgot to specify the public access modifier (public in VB.N ET) on the class 
in that case. Thedefault is internal (Friend in VB.N ET), which makes the class visible to other 
classes in the same assembly but hides it from code outside the assembly. Adding the keyword pub- 
lic or Public in front of the class definition should fix the problem. 
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Events 

The final important topic tiiat needs to be discussed in tliis cliapter is events. ASP.N ET is an event- 
driven environment, wiiicli means tliat code can execute based on certain events tiiat occur in your 
application. Events are raised by certain objects in the application and then handled by others. 
M any objects in the .N ET Frameworl< are capable of raising an event, and you can even add your 
own events to classes that you write. 

To be able to handle an event raised by an object, you need to write an event handler, which is basi- 
cally a normal method with a special signature. You can wire up this event handler to the event 
using event wiring syntax, although VS takes care of writing that code most of the time for you. 
W hen an object, such as a control in a web page, raises an event, it may have the need to pass addi- 
tional information to the event handler, to inform it about relevant data that caused or influenced 
the event. You can send out this information using an event arguments class, which is the class 
System. EventArgs or any classthat inherits it. 

To see how all these terms fit together, consider what happens when you clicl< a button in a web 
page. When you clicl< it, the client-side button in the browser causes a postbacl<. At the server, the 
Button control sees it was clicl<ed in the browser and then raises its click event. It's as if the but- 
ton says: "Oh, lool<, everyone. I just got clicked. In case anyone is interested, here are some details." 
Usually, the codethat is interested in the button's click event is your own page, which needs to 
have an event handler to handle the click. You can create an event handler for the Button by dou- 
ble-clicking it in the designer, or you can wire it up using M arkup View as you saw in Chapter 4. 
Alternatively, you can double-click the relevant event on the Events tab of the Properties Grid. You 
open this tab by clicking the button with the lightning bolt on the toolbar of the Properties Grid (see 
Figure 5-9.) 
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If you double-click the control in Design View or the event name in the Properties Grid, VS writes 
the code for the event handler for you. The following snippet shows the handler for a Button con- 
trol's Click event in VB.N ET and C#; 


VB.NET 

Protected Sub Buttonl_Click {sender As Object, e As EventArgs) 
Handles Buttonl . Click 

End Sub 
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C# 

protected void Buttonl_Click (object sender, EventArgs e) 

{ 

} 

In the VB.N ET example, you see a standard method with some arguments, followed by Handles 
Buttoni .Click. This is the event wiring code that hooks up the Button control's click event to the 
Buttoni_ciick method. N ow, whenever the button is clicked, the code inside Buttoni_ciick is 
executed. 

The C# version doesn't have this Handles keyword. Instead, with C# you'll find that VS has added 
the following bold code to the Button control in the markup of the page: 

<asp:Button ID="Buttonl" runat="server" Text="Button" OnClick="ButtonlClick" /> 

With this piece of markup, the compiler generates the necessary code to link up theButtoni_ciick 
method to the ciick event of the button. At run time you'll see the exact same behavior: W hen 
you click the button, the code in Buttoni_ciick is executed. N otethat if you wire up an event in 
M arkup View in VB.N ET, you get the same behavior as in C#; in that case the Handles keyword is 
omitted from the Code Behind because there's already an on handler in M arkup View. 

You can also see that this Buttoni_ciick event handler has two parameters: an object called 
sender and an EventArgs class Called e. This is a standard .N ET naming scheme and is followed 
by all objects that generate events. The sender parameter contains a reference to the object that 
triggered the event, Buttoni in this example. This enables you to find out who triggered an event in 
case you wired up multiple events to the same event handler. 

The second parameter is an instance of the EventArgs class and supplies additional arguments 
to the event. With a button's click, there is no additional relevant data to submit, so the plain 
and empty EventArgs class is used. H owever, in later chapters (for example. Chapter 9, which 
deals with data-driven Web Forms), you see some examples of classes that fire events with richer 
information. 

With the concepts of events, you have come to the end of the section on object orientation. This sec- 
tion should have familiarized you with the most important terms used in object-oriented program- 
ming. You see practical examples of these concepts in the remainder of this book. 


PRACTICAL TIPS ON PROGRAMMING 

The following list presents some practical tips on programming: 

>• Always give your variables meaningful names. For simple loop counters you can use i, 
although loopcount probably describes the purpose of the variable much better. Don't pre- 
fix variables with the word var. All variables are variables, so adding var only adds noise 
to your code. Consider useful names such as_firstName and _categoryid as opposed to 

strFName, varFirstName, Or cati for private fields, and nameS like FirstName and Person 

for public properties and classes, respectively. 
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Experiment and experiment. Even more so tlian witli wori<ing witli controis and ASPX pages, 
tlie best way to iearn liow to program is by actuaiiy doing it. J ust type in some code and 
liit Ctrl4f 5 to see liow tlie code beliaves. Tlie compiler will bark at you when something is 
wrong, providing you with useful hints on how to fix it. Don't be afraid to mess anything 
up; just l<eep trying variations until the code does what you want it to do. If you can't mal<e 
your code work, check out Chapter 18, which deals with debugging. You'll find useful tips to 
locate and fix many of the errors that may occur in your code. 

>- When writing functions or subroutines, try to minimize the number of lines of code. Usually, 
methods with more than 40 or 50 lines of code are a sign of bad design. W hen you see such 
code, consider the option to move certain parts to their own routine. This makes your code 
much easier to understand, leading to better code with fewer bugs. Even if a method is used 
only once, keeping a chunk of code in a separate method can significantly increase the read- 
ability and organization of your code. 

>- When writing comments in your code, try to describe the general purpose of the code instead 
of explaining obvious statements. For example, this comment (seen many times in real code) 
is completely useless and only adds noise; 

Dim loopCount As Integer = 0 ' Declare loopCount and initialize it to zero 

Anyone with just a little bit of coding experience can see what this code does. 


SUMMARY 

Although programming can get really complex, the bare basics that you need to understand are 
relatively easy to grasp. The fun thing about programming is that you don't have to be an expert to 
make useful programs. You can start with a simple H ello World example and work from there, each 
time expanding your view on code a little. 

This chapter covered two main topics. First, you got an introduction to programming in .N ET using 
either C#or VB.N ET. You saw what data types and variables are and learned about operators, 
decision making, and loops. You also saw how to write organized code using functions, subs, and 
namespaces and how to add comments to your code. 

The final section of this chapter dealt with object orientation. Though object orientation in itself is 
a very large subject, the basics are easy to pick up. In this chapter you learned about the basic ele- 
ments of 00 programming: classes, methods, properties, and constructors. You also learned a bit 
about inheritance, the driving force behind object-oriented design. 

In the next chapter, which deals with creating consistent-looking web pages, you see inheritance 
again when you create a BasePage class that serves as the parent for most of the Code Behind 
classes in the Planet Wrox project. 


204 I CHAPTERS PROGRAMMING YOUR ASP.NET WEB PAGES 


EXERCISES 


1. Considering tine fact tliat tine oldest person in the world lived to be 122, what's the best numeric 
data type to store a person's age? Bonus points if you come up with an even better alternative to 
store someone's age. 

2. What does the following code do? 

VB.NET 

DeleteButton. Visible = Not DeleteButton. Visible 
C# 

DeleteButton. Visible = IDeleteButton. Visible; 

3. Given the following class Person, what would the code look like for a new class student that con- 
tains a string property called studentid? Make use of inheritance to create this new class. 

VB.NET 

Public Class Person 

Public Property Name As String 
End Class 

C# 

public class Person 
{ 

public string Name { get; set; } 

} 


You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 


Class 

A blueprint for objects in a programming language 

Collection 

A special data type that is capable of holding multiple 


objects at the same time 

Encapsulation 

Hiding the inner worl<ings and data of a class from the 


outside world in order to better manage and protect that 


data 

Instantiating 

The process of creating a new object in memory based 


on a type's definition 

Method 

An operation on an object, lil<e Brake ( ) for a Car class 

Namespace 

A way to structure classes and other types in a hierarchi- 


cal manner 

Object Orientation 

A popular style of programming where the software is 


modeled as a set of objects interacting with each other 

Overriding 

Redefining the behavior in a child class of a member 


defined in a parent class 

Property 

A characteristic of an object, like the first name of a 


person 



Creating Consistent Looking 
Websites 

WHAT YOU WILL LEARN IN THIS CHAPTER: 


>• How to use master and content pages that enable you to define the 
global look and feel of a web page 

> How to work with a centralized base page that enables you to define 
common behavior for all pages in your site 

> How to create themes to define the look and feel of your site with an 
option for the user to choose a theme at run time 

> How to create skins to make site-wide changes to control layout 
>• What the ASP.NET page life cycle is and why it's important 

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 
www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the Chapter 6 dowhload. 

W hen you're building a website you should strive to make the layout and behavior as consis- 
tent as possible. Consistency gives your site a professional appearance and it helps your visi- 
tors to find their way around the site. Fortunately, ASP.N EI 4.5 and Visual Studio 2012 offer 
a number of great features and tools to implement a consistent design, helping you to create 
great-looking pages in no time. 

In previous chapters you learned how to work with VS, HTM L5, CSS, and server controls 
to create your web pages visually. Chapter 5 introduced you to programming in ASP.N ET. 
This chapter is the first that combines these concepts, by showing you— among many other 
things— how to use programming code to change the appearance of the site. 
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The first section siiowsyou liow to create a master pagetiiatdefinestliegenerai iooi< and fed of a 
page. Tlie ASPX pages in your site can tiien usetiiis master page witiiout tiie need to repeat tiiegen- 
erai iayout. Tiie remaining sections of tliis ciiapter build on top of tiiis master page. 


CONSISTENT PAGE LAYOUT WITH MASTER PAGES 

Witli most websites, only part of the page changes when you go from one page to another. The parts 
that don't change usually include common regions I il<e the header, a menu, and the footer. To cre- 
ate web pages with a consistent layout, you need a way to define these relatively static regions in a 
single template file. Versions of ASP. N ET prior to 2.0 did not have a template solution, so you were 
forced to duplicate your page layout on every single page in the website, or resort to weird program- 
ming tricl<s. Fortunately, this is no longer the case due to master pages. The biggest benefit of master 
pages is that they enable you to define the look and feel of all the pages in your site in a single loca- 
tion. This means that if you want to change the layout of your site— for instance, if you want to 
move the menu from the left to the right— you need to modify only the master page, and the pages 
based on this master picl< up the changes automatically. 

W hen master pages were introduced in ASP.N ET 2.0, they were quicl<ly embraced by the developer 
community as the template solution for ASP.N ET pages because they are very easy to use. Even bet- 
ter, VS has great design-time support, because it enables you to create and view your pages at design 
time during development, rather than only in the browser at run time. 

To some extent, a master page looks like a normal ASPX page. It contains static H TM L such as the 
<htmi>, <head>, and <bodY> elements, and it can also contain other HTML and ASP.N ET Server 
Controls. Insidethe master page, you set up the markup that you want to repeat on every page, like 
the general structure of the page and the menu. 

H owever, a master page is not a true ASPX page and cannot be requested in the browser directly; it 
only serves as the template on which real web pages— called content pages— are based. 

I nstead of the @ page directive that you saw in Chapter 4, a master page uses an @ Master directive 
that identifies the file as a master page: 

VB.NET 

<%@ Master Language="VB" %> 
C# 

<%@ Master Language="C#" %> 

Just like a normal ASPX page, a master page can have a Code Behind file, identified by itscodepiie 
and Inherits attributes: 
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VB.NET 

<%@ Master Language="VB" CodeFile="Frontend. master. vb" 
Inherits="MasterPages_Frontend" %> 

C# 

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend. master. cs" 
Inherits="MasterPages_Frontend" %> 

To create regions that content pages can fill in, you define contentPiaceHoider controls in your 
page lil<ethis: 

<asp : ContentPiaceHoider ID="ContentPlaceHolderl " runat= "server" > 
</asp : ContentPiaceHoider > 

You can create as many placeholders as you lil<e, although you usually need only a few to create a 
flexible page layout. 

The content pages, which are essentially normal ASPX files, without the code that they're going to 
take from the master page, are connected to a master page using the MasterPagePiie attribute of 
the Page directive: 


VB.NET 

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPages/Frontend. master" 

AutoEventWireup=" false" CodeFile="Def ault . aspx.vb" Inherits="_Def ault"> 

C# 

<%(B Page Title="" Language="C#" MasterPageFile="~/MasterPages/Frontend. master" 

AutoEventWireup="true" CodeFile="Def ault .aspx.cs" Inherits="_Def ault"> 

The page-specific content is then put inside a content control that points to the relevant 

ContentPiaceHoider! 

<asp: Content ID=" Content 1" ContentPlaceHolderID= "ContentPiaceHoider 1" 

runat=" Server" > 
</asp : Content> 

N otethat the contentPiacenoideriD attribute of the content control points to the 
ContentPiaceHoider that is defined i n the master page. Right now it points to the default 
name of contentpiacenoiden, but in a later exercise you see how to change this. 

At run time, when the page is requested, the marl<up from the master page and the content page are 
merged, processed, and sent to the browser. Figure 6-1 shows a diagram of the master page with 
just one ContentPiaceHoider and the Content page that results in the final page that is sent to the 
browser. 
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Master Page 




Header 


Menu 

ContentPlaceHolder 


Content Page 




Header 


Menu 





Final Page 

FIGURE 6-1 


To see this process in action, tliefoiiowing sections guide you tlirougli creating master and content 
pages. 


Creating Master Pages 

You can add master pages to tlie site using tlie Add New Item dialog box. You can place them in 
any custom folder in the site, including the root folder, but from an organizational point of view, it's 
often easier to store them in a separate folder. Just lil<e normal ASPX pages, they support the inline 
code model as well as the Code Behind model. The master pages used in the Planet Wrox project use 
the Code Behind model exclusively. In the following exercise, you learn how to create a simple mas- 
ter page and add someHTM L to it to define the general structure of the pages in your website. 


lUylKSJ^] Creating a Master Page 

1. Open the Planet Wrox project in Visual Studio if it is not open already. 

2. In Chapter 2 you created a folder called MasterPages to hold your master pages and then added 
a single master page to that folder. If you didn't carry out that exercise, add the master page now. 
To do this, create the MasterPages folder in the root of the site, right-clicl< the new folder, choose 
Add o Add N ew Item, and select the M aster Page item. M al<e sure that the master page uses 
Code Behind and that it is using your preferred programming language. N ame the master page 

Frontend. master. Finally, Clicl< Add. 
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3. Add the following highlighted code between the <form> tags of the master page, replacing the 
<div> tags and the contentpiaceHoider that VS added for you when you created the master 
page. N ote that this is almost the same code you added to Default .aspx in Chapter 3, except for 
the <asp:ContentpiaceHoider> element and the <a> element within the Header <div>. The <a> 
element takes the user bacl< to the homepage, and will be styled later. 

<form id="forml" runat="server"> 
<div id="PageWrapper"> 

<header><a href ="/" >Header Goes Here</a></header> 
<nav>Menu Goes Here</nav> 
<section id="MainContent"> 

<asp: ContentpiaceHoider ID="cpMainContent" runat="server"> 
</asp :ContentPlaceHolder> 
</section> 

<aside id="Sidebar">Sidebar Goes Here</aside> 
<footer>Footer Goes Here</f ooter> 
</div> 

</ f orm> 

M al<esurethat you have the contentpiaceHoider within the Maincontent <section> tags. You 
can drag one from the Toolbox onto the pageor enter the code directly, using Intel 11 Sense's help- 
ful hints. In both cases you should give the control an id of cpMaincontent. 

4. Next, switch the master page into Design View and then drag styles, ess from the styles folder 
in the Solution Explorer onto the master page. As soon as you drop the file, VS updates the Design 
View and shows the layout for the site that you created in Chapter 3. If the design doesn't change, 
switch to M arkup View and ensure there's a <iink> tag in the head of the page pointing to your 
CSS file: 

<asp : ContentpiaceHoider ID="head" runat= " server" > 
</asp : ContentPlaceHolder> 

<link href=" . ./Styles/Styles. CSS" rel="stylesheet" type="text/css" /> 

</head> 

The page should now look like Figure 6-2 in Design View. 


Frontend, master* -o X 


body I 

Header Goes Here 


Menu Goes Here 



'Bdebar Goes Here "1 


a Design ] a Split | •■ Source | [<] |<html>||<body>| <form#form1 > 


0 


FIGURE 6-2 
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N ote the area with the purple border around it between the menu and the footer region in your 
Design View. This is the contentpiaceHoider controi that is used by the content pages. You see 
how to use it in the next exercise. 

5. Drag thefiiemodernizr-2 .6 .2 . js from the scripts foider into the <head> section of the M aster 
Page below the CSS file. Then manually replace the two leading periods with a slash, lil<ethis: 

< script src= " /Script s/modernizr- 2 . 6 . 2 . j s " ></ script > 

6. You can save and close the master page because you're done with it for now. 
How It Works 

W ithin VS, master pages behave lil<e normal pages. You can add HTML and server controls to them, 
and you can manage the page both in M arl<up and Design View. The big difference is, of course, that a 
master page isn't a true page itself; it only serves as a template for other pages in your site. 


In the next section you see how to use this master page as the template for a content page. 


Creating Content Pages 

A master page is useless without a content page that uses it. Generally, you'll have only a few 
master pages, whereas you can have many content pages in your site. To base a content page 
on a master page, checl< the Select M aster Page option at the bottom right of the Add N ew Item 
dialog box when you add a new Web Form to your site. Alternatively, you can set the 
MasterPageFiie attribute on the page directly in the M arkup View of the page. You saw this ® 
Page di rective earl ier in this chapter when master and content pages were introduced. 

Content pages can only directly contain content controls that each map to a contentpiaceHoider 
control in the master page. These content controls in turn can contain standard marl<up lil<e H TM L 
and server control declarations. Because the entire marl<up in a content page needs to be wrapped 
by <asp:Content> tags, it's not easy to turn an existing ASPX page into a content page. Usually the 
easiest thing to do is copy the content you want to keep to the clipboard, delete the old page, and 
then add a new page based on the master page to the website. Once the page is added, you can paste 
the markup within the <asp: content > tags. You see how this works in the following exercise. 


lUylKSJ^] Adding a Content Page 

In this Try It 0 ut you see how to add a content page to the site that is based on the master page you cre- 
ated earlier. Once the page is added, you add content to the <asp: content > regions. 

1. In previous exercises you added standard ASPX pages to your project, which should now be 

" upgraded" to make use of the new master page. If you want to keep the welcome text you added 
to Default. aspx earlier, copy all theHTM L between theMaincontent <section> tags to the 
clipboard (that is, the <hi> and the two <p> elements that you created earlier) and then delete 
the Default .aspx page from the Solution Explorer. N ext, right-click the website in the Solution 
Explorer and choose Add o Add N ew Item. Select the correct programming language, click Web 
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Form, name the page Default. aspx, and then, at the bottom of the dialog box, select the check 
boxes for Place Code in Separate File and Select M aster Page, as shown in Figure 6-3. 
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FIGURE 6-3 


Finally, click theAdd button. 

2. In the Select a M aster Page dialog box (see Figure 6-4), click theMasterPages folder in the left- 
hand pane, and then in the area at the right, click prontend. master. 



lect a Master Page 

Contents of folder; 


I Site 
> Q App_Code 
0 Controls 
S Demos 
^ MasterPage 
0 Scripts 
S Styles 


Cancel 


FIGURE 6-4 

Click OK to add the page to your website. 
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Instead of getting a full page with HTML as you got with standard ASPX pages, you now only 
get two <asp:Content> placeholders as shown In thIsVB.N ET example: 

<%(S Page Title="" Language="VB" MasterPageFile="~/MasterPages/Frontend. master" 
AutoEventWireup=" false" CodeFile="Def ault . aspx. vb" Inherits="_Def ault" %> 
<asp:Content ID="Contentl" ContentPlaceHolderID="head" runat="Server"> 
</asp : Content> 

<asp:Content ID="Content2" ContentPlaceHolderID=" cpMainContent" runat=" Server "> 
</asp : Content > 

3. Switch to Design View and note that everything Is grayed out and read-only, except for the 
<asp:Content> region for cpMainContent. Figure 6-5 shows you how the page should look. 
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FIGURE 6-5 


Also note that VS conveniently lists the master page that this page Is based on In the top-right cor- 
ner of Design View, visible In Figure 6-5. Clicking the name opens the master page In the editor. 

4. If you still have the old markup from the Default .aspx on the clipboard, click once Inside the 
cpMainContent placeholder and press Ctrl -f-V. (N ote: you can do this both In Design View and In 
M arkup View). This adds the markup to the page, right between the <asp:Content> tags. 

5. Save your changes by pressing Ctrl-f-S and press Ctrl-ff 5 to open the page In your browser. The 
browser should display the page very closely to what you saw In Design View (see Figure 6-5). 

6. N ow take a look at the HTM L for the page In the browser. You can do this by right-cllcking the 
page and choosing View Source or View Page Source. N ote that the source of the final page In the 
browser Is a combination of the source of the master page and the content page: 

<div id="PageWrapper" > 

<header><a href ="/" >Header Goes Here</a></header> 
<nav>Menu Goes Here</nav> 
<section id="MainContent"> 

<hl>Hi there visitor and welcome to Planet Wrox</hl> 

<p class=" Introduction" > 

We&#39;re glad you&#39;re paying a visit to <a 
href ="http: //www. Plane tWrox. com" > 

www. PlanetWrox. com</a>, the coolest music community site on the Internet. 

</p> 


The first four lines come from the master page and the bolded lines of H TM L code come from the 
content page. 
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7. Switch back to VS and create a new page called Login, aspx In the root of the site based on the 
master page. N otice how VS remembered your last settings with regard to the master page and 
Code Behind (make sure both are checked In case you unchecked them earlier). Switch to M arkup 
View and create an <hi> element Inside the cpMaincontent placeholder with the text Log in to 
Planet Wrox. There's no need to add any other controls to this page just yet, but It serves as the 
basis for the login functionality you create In Chapter 16. Without any content In the Maincontent 
element, the sidebar will be moved to the left of the page. 

8. Go back to Default . aspx and switch to Design View. Beneath the welcome text with the header 
and two <p> elements, create a new paragraph (press Enter In Design View) and type some text 
(for example, you can log in here). N otIce how thIs new paragraph has a class attribute 
called Introduction because VS applies the prevlous class to new paragraphs automatically. 
Remove this class using the Clear Styles option of the Apply Styles window, or manually remove It 
from the code In M arkup View. 

9. H Ighllght the words "log In" In Design View and choose Format o Convert to H yperlink from 
the main menu. In the dialog box that follows, click the Browse button and select the Login. aspx 
page that you just created. Click OK twice. 

10. Save all changes and press Ctrl4f 5 again to view Default .aspx In the browser. Then click the link 
you created In the preceding step. You should now betaken to Login. aspx. Note that the general 
layout, like the header and the sidebar. Is maintained. The only thing that changes when you go 
from page to page Is the content In the main content area. 

How It Works 

W hen a page based on a master page Is requested In the browser, the server reads In both the con- 
tent page and the master page, merges the two, processes them, and then sends the final result to the 
browser. In step 6 of this exercise you saw thattheHTM L In the browser for the requested page con- 
tained the markup from both files. 


M aster pages will save you a lot of work when It comes to updating or radically changing the looks 
of your site. Because the entire design and layout of your site Is defined In the master page, you only 
need to touch that singleflle when you want to make any changes. All content pages will pick up the 
changes automatically. 

A Closer Look at Master Pages 

So far you've seen a master page with a content placeholder for the main content. But If you look at 
the master page In M arkup View, you'll find another content placeholder In the head section of the 
page: 

<head runat= " server" > 
<title></title> 

<asp:ContentPlaceHolder id="head" runat="server"> 
</asp : ContentPlaceHolder > 

</head> 

This placeholder Is added for you automatically to each new master page you create. You can use It 
In content pages to add page-specific content that belongs between the <head> tags of a page, such 
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as CSS (both embedded and external stylesheets) and JavaScript. You learn more about JavaScript 
In Chapters 10 and 11. You need to add content to this placeholder In M arkup View, because It's not 
visible In Design View. 

The contentPiaceHoider Called cpMaincontent In the master page currently does not contain any 
markup Itself. H owever, It doesn't have to be like this. You can easily add your own content there 
that will serve as the default In your content pages as long as It's not overridden by the content page. 
For example, you can have the following contentPiaceHoider In a master page: 

<asp : ContentPiaceHoider ID="cpMainContent" runat=" server "> 

This is default text that shows up in content pages that don't 
explicitly override it. 

</asp : ContentPlaceHolder> 

W hen you base a new page on this master page, you won't see this default at first In M arkup View. 
H owever, you can open the content control's Smart Tasks panel, shown In Figure 6-6, and choose 
Default to M aster's Content. 


Header Goes Here 


c pMainContent ( Custom) I 

E Content Tasks 


-OOter Goes Here ^ ^ Default to Master's Content 
^ 


FIGURE 6-6 


W hen you click Yes when asked If you want to default to the master page content, VS removes the 
entire content control from the M arkup View of the page. H owever, when you request the page 
In the browser you will still seethe default content from the master page. In Design View, the con- 
tent Is still visible, now presented as a read-only area on the design surface. A master page with 
default content can be useful If you add a new contentPiaceHoider to the master page at a later 
stage. Existing pages can simply display the default content, without the need for you to touch 
all these pages. N ew pages can define their own content. If you don't have default content In the 
ContentPiaceHoider control I n the master page and the content page doesn't have a content con- 
trol for the ContentPiaceHoider, no output Is Sent to the browser. 

0 nee you have defaulted to the master page's content, you can create custom content again by open- 
ing the Smart Tasks panel and choosing Create Custom Content. This copies the default contents 
Into a new content control that you can then modify. 

Nesting Master Pages 

It Is also possible to nest master pages. A nested master page Is a master that Is based on another 
master page. Content pages can then be based on the nested master page. This Is useful If you have 
a website that targets different areas that still need to share a common look and feel. For example, 
you can have a corporate website that Is separated by departments. The outer master page defines 
the global look and feel of the site. Including corporate logo and other branding elements. You can 
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then have different nested master pages for different departments. For exampie, the saies depart- 
ment's section couid be based on a different master than the mari<eting department's, enabiing eacli 
to add their own identity to their section of the site. VS 2012 has excellent Design View support for 
nested master pages, giving you a good look at how the final page will end up. 

Creating a nested master page is easy: check the Select M aster Page check box when you add a 
master page just as you do when you add a normal content page to the site. Then add markup and 
contentpiaceHoider cohtrols to the Content cohtrols at locatiohs that you Want to override in the 
content pages. Finally, you choose your nested master page as the master for new content pages you 
create. I nside the content page, you only see the contentpiaceHoider controls from the nested mas- 
ter page, not from its parent. 

Master Page Caveats 

A Ithough master pages are great and can save you a lot of work, you need to be aware of some 
caveats. 

For starters, theASP.N ET run time changes the client I D of your controls in the page. This is the id 
attribute that is used in client script to access controls from JavaScript in the browser and with CSS 
ID selectors. W ith normal ASPX pages, the server-side ID of a control is usually inserted one-on-one 
in the final H TM L. For example, a Button control with a server-side ID of Buttoni in a normal 
ASPX page defined with this code, 

<asp:Button ID="Buttonl" runat= " server " Text="Click Me" /> 

ends up with a client-side ID like this in the final HTM L: 

<input type="submit" name= "Buttoni" value="Click Me" id="Buttonl" /> 

However, thesame button inside an <asp:Content> control endsup likethis: 

<input type="submit" name="ctlOO$cpMainContent$Buttonl" 
value=" Click Me" id="cpMainContent_Buttonl" /> 

The name attribute has been prefixed with the auto-generated ID of the master page(ctioo) 
and both the name and the id attributes contain the ID of the contentpiaceHoider control 

(cpMainContent) . 

This means that any client-side code that previously referred to Buttoni should now refer to 

cpMainContent_Buttonl. 

Note that this is not just a master page problem. You'll also run into thisbehavior in other situa- 
tions; for example, when working with user controls (discussed in Chapter 8) and data-bound con- 
trols (discussed in Chapter 13 and onward). 

The second caveat is related to the first. Because the name and id of the H TM L elements are 
changed, they add considerably to the size of the page. This may not be problematic for a single con- 
trol, but once you have pages with lots of controls, this could impact the performance of your site. 
The problem gets worse with nested master pages, where both content controls are appended to the 
ID. Thesame button insidea nested master page can end up likethis: 

< input type= "submit" name="ctlOO$ctlOO$cpMainContent$ContentPlaceHolderl$Buttonl " 
value="Click Me" id="cpMainContent_ContentPlaceHolderl_Buttonl" /> 
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To mitigate tlie problem, you sliould i<eep tlie I D s of your contentPiaceHoider and content con- 
trols as sliort as possible. To improve readability, this bool< uses longer names, lil<e cpMaincontent, 
H owever, in your own sites, you could reduce this to mc or cpMc to save some bandwidth on every 
request. 


NOTE ASP.NET 4 introduced a new feature called ciientiDMode that helps 
minimize the problems typically associated with changing client-side IDs. You 
learn more about this feature in Chapter 8. 


M aster pages enable you to define the general lool< and feel of your site in a single location, thus 
improving the consistency and maintainability of your site. H owever, there is another way to 
improve consistency: centralize the behavior of the pages in your website. You can do this with a so- 
called base page, which is discussed next. 


USING A CENTRALIZED BASE PAGE 


in Chapter 5 you learned that, by default, all ASPX pages derive from a class called system. web 
.ui .Page. This means all of your pages have at least the 
behavior defined in this class. 


H owever, in some circumstances this behavior is not 
enough and you need to add your own stuff to the mix. 
For example, you may have the need to add some behav- 
ior that applies to all the pages in your site. Instead of 
adding this behavior to each and every individual page, 
you can create a common base page. All the pages in your 
site can then inherit from this intermediate page instead 
of from the standard Page class. The left half of Figure 
6-7 shows how an ASPX page called MywebPage inherits 
from the Page class directly. The right half shows a situ- 
ation where the ASPX page inherits from a class called 
BasePage, which in tum inherits from page. 
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FIGURE 6-7 


To have your pages inherit from this base page, you need to do two things: 

>■ Createa class that inherits from system, web. ui. page in theApp_code folder of your 
website. 

>" M akethe web pages in your site inherit from this base page instead of the standard Page 
class. 

In an upcoming exercise you createa new base page class inside the App_code folder. For now, 
the sole purpose of this class is to checl< the Title of the page at run time to stop pages with an 
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empty title or a meaningless title lil<e "Untitled Page" making it to the browser. Giving your pages a 
unique and helpful title helps the major search engines to index them, so it's recommended to always 
include a title in your web pages. Checking the title programmatically is relatively easy to do, which 
enables you to focus on the concept of inheritance rather than on the actual code. In the section that 
discusses themes later in this chapter, you modify the base page once more, this time to retrieve the 
user's preference for a theme. 


NOTE Older versions of VS used "Untitled Page" as the default title for new Web 
Forms. However, starting with the Service Pack 1 release of Visual Studio 2008, 
the default title is an empty string. I decided to leave the check for "Untitled 
Page" in the base page so you can see how you con check for unwanted titles. 


Before you can implement the base class, you need to know more about theASP.N ET page life 
cycle, an important concept that describes the process a web page goes through when requested by a 
browser. 

An Introduction to the ASP.NET Page Life Cycle 

W hen you think about how a page is served by a web server to the browser and think of this 
process as the life cycle of a page, you can probably come up with a few important moments in 
the page's life. For example, the initial request by the browser is the starting point for the page's 
"life." Similarly, when the page has sent its entire H TM L to the browser, its life may seem to end. 
H owever, more interesting events are going on in the page's life cycle. The following table describes 
eight broad phases the page goes through. W ithin each phase, at least one event is raised that 
enables a page developer to hook into the page's life cycle and perform actions at the right moment. 
You see an example of this in the next exercise. 


PHASE 

DESCRIPTION ^■■■M ^^^^l^^^^l^^^^^m^^ 

Page request 

A request to an ASPX page starts the life cycle of that page. When the web 
server is able and allowed to return a cached copy of the page, the entire life 
cycle is not executed. In all other situations, the page enters the start phase. 

Start 

In this phase, the page gets access to properties like Request and Response 
that are used to interact with the page's environment. In addition, during this 
phase the Preinit event is raised to signal that the page is about to go into the 
initialization phase. You use this event later to set the theme of a page. 

Page 

initialization 

During this phase, the controls you have set up in your page or added program- 
matically become available. Additionally, the Page class fires three events; init, 
InitComplete, and PreLoad. 


continues 
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(continued) 


PHASE 

DESCRIPTION ^nnm^^ ^m^l 

Losd 

L.'UIIIILJ LI Mb pi Icibcr, LI Ic: l^UIILIUI pi Uptrl LIcrb Olcr lUCiUtrU IIUIII vltrW OLaLc: CilIU ^UIILIUI 

State during a postback. For example, when you change the selected item in a 
DropDownList and then cause a postback, this is the moment where the correct 
item gets preselected in the drop-down list again, which you can then work with 
in your server-side code. Also, during this phase the page raises the Load event. 

Validation 

In the validation phase, the Validation controls used to validate user input are 
processed. You learn about validators in Chapter 9. 

Postback event 
handling 

During this phase, the controls in your page may raise their own events. For 
example, the DropDownList may raise a SelectedlndexChanged event 
when the user has chosen a different option in the list. Similarly, a TextBox may 
raise the Textchanged event when the user has changed the text before she 

pUbLfcrU UcH.^l\ LU LI Itzr bfcrl Vtrl . VVIItrll all trVtrllL pi Ut.-trbz>l 1 ly lb UUI Ifcr, LI Itr paytr IcJIbfcrb 

the LoadComplete event. Also during this phase the PreRender event is raised 
to signal that the page is about to render to the browser. Shortly after that, 
SaveStateComplete is raised to indicate that the page is done storing all the 
relevant data for the controls in View State. 

Rendering 

Rendering is the phase where the controls (and the page itself) output their 
HTML to the browser. 

Unload 

The unload phase is really a clean-up phase. This is the moment where the page 
and controls can release resources they were holding on to. During this phase, 
the Unload event is raised so you can handle any cleanup you may need to do. 


One thing that's important to realize is that all these events fire at the server, not at the client. So, 
even if you change, say, the text of a text box at the client, the Textchanged event of the TextBox 
control will fire at the server after you have posted bacl< the page. 

N ow you may wonder why you need to know all of this. The biggest reason to have some under- 
standing of the page life cycle is that certain actions can be performed only at specific stages in the 
page life cycle. For example, dynamically changing the theme has to take place in premit, as you'll 
see later. To really understand theASP.N ET page life cycle, you need to know a little more about 
controls, state, events, and so on. Therefore, you'll revisit the page life cycle again in Chapter 15 
where you get a good look at all the different events that fire, and in what order. 

In the next exercise, you use the preRender event of the page class to check the title. Because a 
developer could set the page's title programmatically during many events, checking for a correct title 
should be done as late as possible in the page's life cycle, which is why PreRender is the best event 
for this. 
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Implementing the Base Page 

Implementing a base page is pretty easy: all you need to do is add a class file to your App_code 
folder, add some code to it, and you're done. What's often a bit more difficult is to make sure each 
page in your site inherits from this new base page instead of from the standard system. web. ui 
.Page class. Unfortunately, there is no way to configurethe application to do thisfor you automati- 
cally when using Code Behind, so you need to modify each page manually. Visual Studio makes it 
a little easier for you by enabling you to export a page template that already contains this code. In 
the next exercise you add a base page to the site and in a later exercise you see how to export a web 
form to a template so you can add files that use the base page in no time. 


||j|ym2]Q| Creating a Base Page 

1, Right-dick the App_code folder in the Solution Explorer and choose Add o Add N ew Item. Select 
Class in the Templates list and name the file BasePage. You could choose another name if you 
like but BasePage dearly describes the purpose of the class, making it easier to understand what it 
does. 

2. Clear the contents of the file, and then add the following code: 


VB.NET 

Public Class BasePage 

Inherits System. Web .UI . Page 


Private Sub Page_PreRender (sender As Object, e As EventArgs) Handles Me . PreRender 
If String. IsNullOrEmpty {Me. Title) OrElse Me . Title . Equals { "Untitled Page", 
StringComparison. CurrentCulturelgnoreCase) Then 
Throw New Exception ( 

"Page title cannot be ""Untitled Page"" or an empty string.") 

End If 
End Sub 


End Class 
C# 

using System; 


public class BasePage : System. Web .UI . Page 
{ 

private void Page_PreRender (object sender, EventArgs e) 
{ 

if (string. IsNullOrEmpty (this. Title) || this . Title . Equals { "Untitled Page", 
StringComparison. CurrentCulturelgnoreCase) ) 

{ 

throw new Exception ( 

"Page title cannot be \"Untitled Page\" or an empty string."); 

} 
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} 

public BasePageO 
{ 

this . PreRender += Page_PreRender ; 

} 

} 

3. Save the file and close it, and then open the Login. aspx page that you created earlier. Open its 
Code Behind file and change the inherits code (the colon [:] in C#) so the login page inherits 
from theBasePage classyou created earlier: 

VB.NET 

Partial Class Login 
Inherits BasePage 

End Class 
C# 

public partial class Login : BasePage 
{ 

} 

4. Save the page and then request it in the browser by pressing Ctrl4f 5. If you haven't changed the 
title of the page earlier, you should be greeted by the error shown in Figure 6-8 in your browser. 


1 Firefox • 


Page be or a... | -t* ^^^^^^^^^^^^^^^^^^^^^^^g 

^ l(f localhost4M08/Login.aspx C | | SI - Google ^ | ♦ D ^ 1 

Server Error in '/' Application. 

i 

Page title cannot be "Untitled Page" or an empty string. 

Description: An unhandled exception occurred during the execution ot the current web request. Please 
review the stack trace for more information about the error and where it originated in the code . 

1 Exception Details: System .Exception: Page title cannot be "Untitled Page" or an empty string. 


FIGURE 6-8 


Instead of this error, you may see an error that displays the source for theBasePage class where 
the title is checl<ed. 

5. Go back to VS and open the login page in M arl<up View. Locate the Title attribute in the o page 
directive (or add one if it isn't there) and set its value to Log in to pianet wrox. The following 
snippet shows the V B.N ET version of the® Page directive but the C# version is almost identical: 

<%@ Page Title="Log in to Planet Wrox" Language="VB" 

MasterPageFile="~/MasterPages/Frontend. master" AutoEventWireup=" false" 
CodeFile="Login . aspx . vb" Inherits="Login" %> 
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6. Repeat steps 3 and 5 for all the pages In your site. To make this a bit quicker, you can use Find and 
Replace to quickly replace all the occurrences of system, web. ui. page with BasePage. M akesure 
you don't accidentally replace It In theBasePage file In the App_code folder Itself. To prevent this 
from happening, make sure you search only In Code Behind files, like this: 

>■ Open the Replace In Files dialog box (press Ctrl +Shlft4fl or select Edit o Find and Replace 
o Replace In Files). 

>• In the Find What box, enter system.web.ui.page. In the Replace With text box, enter 

BasePage. 

>■ Expand the Find Options section and In the Look at These File Types text box, enter 

*.aspx.vb or *.aspx.cs depending on the language you use. This leaves the BasePage file, 
which has a single extension of .vb or .cs, alone. 

>■ Click ReplaceAII and then click Yes to confirm the Replace operation. 

7. Save the changes you made to any open page and then browse to Login, aspx again. If everything 
worked out as planned, the error should be gone and you now see the login page. 

Remember, though, that all other pages In your site now throw an error when you try to access 
them. The fix Is easy; just give them all a valid Title. For pages without a Title attribute In their 
page directive, you need to do this manually. For other pages, with an empty Titie="" attribute, 
you can quickly do this by searching the site for Titie=" " and replacing It with something like 
Titie=" Planet Wrox". (Don't forget to reset Look at These FlleTypes back to *.*). For pages 
other than the demo pages you've created so far, you're better off giving each page a unique title, 
clearly describing the content It contains. 

How It Works 

By default, all pages In your website Inherit from the Page class defined In the system. web. ui 
namespace. This gives them the behavior required to make them act as web pages that can be requested 
by the browser and processed by the server. Because the Inheritance model In .NET enables you to 
create a chain of classes that Inherit from each other, you can easily Insert your own base page class 
between a web page and the standard page class. You do this by changing the inherits statement (In 
VB) and the colon (In C#) to your new BasePage: 

VB.NET 

Partial Class Login 
Inherits BasePage 

C# 

public partial class Login : BasePage 

Inside this new BasePage class you add an event handler that Is called when the class fires Its 
preRender event. Asyou learned earlier, this event Is raised quite late In the page's life cycle, when the 
entire page has been set up and Is ready to be rendered to the client: 

VB.NET 

Private Sub Page_PreRender (sender As Object, e As EventArgs) Handles Me . PreRender 
' Implementation here 
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End Sub 
C# 

private void Page_PreRender (object sender, EventArgs e) 
{ 

// Implementation here 

} 

N ote that Visual Basic uses tlie Handles l<eyword to tell the compiler that the page_preRender method 
will beused to handle the event. In C#, you need to hool< up this handler manually. A good place to do 
this is in the class's constructor; 

public BasePageO 
{ 

this.PreRender += PagePreRender; 

} 

This highlighted line of code serves the same purpose as the Handles keyword in V B.N ET: it tells the 
compiler what method to run when the page raises its preRender event. 

Inside the event handler, the code checl<s the current page title. If the page title is still an empty string 
(the default for any new page you add to your web project) or Untitled Page it throws an exception. 

VB.NET 

If String. IsNullOrEmpty(Me. Title) OrElse Me . Title . Equals ( "Untitled Page", 
StringComparison. CurrentCulturelgnoreCase) Then 
Throw New Exception { 

"Page title cannot be ""Untitled Page"" or an empty string.") 

End If 
C# 

if (string. IsNullOrEmpty(this. Title) || this . Title . Equals ( "Untitled Page" , 
StringComparison . CurrentCulturelgnoreCase) ) 

{ 

throw new Exception ( 

"Page title cannot be \"Untitled Page\" or an empty string."); 

} 

This code uses the handy isNuiiorEmpty method of the string class to check if a value isnuii 
(Nothing in VB) or an empty string. It also uses the Equals method to check if the page title is equal to 
Untitled Page. It uses StringComparison. currentcuitureignorecase to do a case-i nsensitive Com- 
parison, so untitled page or Untitled Page would both match. 

N otice how the keywords Me (in VB.N ET) and this (in C#) are used. These keywords are context- 
sensitive and always refer to the instance of the class where they are used. In this example. Me and 
this refer to the current instance of the BasePage class. This easePage instance has a Title property 
(which it inherits from page) that can be checked for unwanted values. If it still contains the default 
title (an empty string) or the text "Untitled Page," the code raises (or throws) an exception. This imme- 
diately stops execution of the page so you as a page developer can fix the problem by providing a valid 
title before the page ends up in public. In Chapter 18 you learn more about exceptions and how to pre- 
vent and handle them. 
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To display a double quote (") in the error message, both languages use a different format. In Visual 
Basic, you need to double the quotes. In C#, you need to prefix the double quote with a backslash (\) to 
escape the double quote. In both cases, a double quote character ends up in the error message. 


Because every new page you add to the site should now inherit from this new base page, you should 
create a page template that already has the correct code in its Code Behind and markup, making it 
easy to add the correct page to the site right from the start. This is discussed next. 

Creating Reusable Page Templates 

Visual Studio comes with a great tool to export templates for a number of different file types includ- 
ing ASPX pages, class files, and even CSS files. By creating a custom template, you define the code or 
markup that you need in every file once and then create new files based on this template, giving you 
a jump start with the file and minimizing the code you need to type. The next exercise shows you 
how to create your own templates. 

^^^^^^Q Creating a Reusable Page Template 

In this exercise you see how to create a template file for all new ASPX pages you add to your site. To 
avoid conflicts with existing pages in your current site, you create a new temporary page and use that 
for the template. Afterward, you can delete the temporary file. 

1. Add a new Web Form to the root of the site and call it Temporary . aspx. M ake sure it uses Code 
Behind, uses your programming language, and is based on the master page in thenasterpages 
folder. 

2. Open the Code Behind of this new page (by pressing F7) and change the inherits line (the colon 
in C#) so the page inherits from BasePage instead of from system, web.ui. page. Also rename the 

class from Temporary to $relurlnamespace$_$saf eiteiniiame$: 
VB.NET 

Partial Class $relurlnamespace$_$saf eitemname$ 
Inherits BasePage 

End Class 
C# 

public partial class $relurlnamespace$_$saf eitemname$ : BasePage 
{ 

} 

M ake sure you don't remove any of the existing code, like the using statements or the page_Load 
method in the C# version. 

Don't worry about any compile errors you may get about unexpected characters like $. 0 nee you 
start adding pages based on this template, $reiurinamespace$_$safeitemname$ will be replaced 
by the name of the page you're addi ng. 
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3. Switch to M arkup View, and Cliange tine inherits attribute from Temporary to $relurlnamespa 
ce$_$safeitemname$ as shown in this C#example: 

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Frontend. master" 
AutoEventWireup=" true" CodeFi le=" Temporary . aspx. cs" 
Inherits="$relurlnamespace$_$saf eiteinname$" %> 

You must ieavetlie codepiie attribute aione; VS wiii cliange it to tlie riglit Code Belli nd fiie auto- 
matical iy wlienever you add a new page to tliesite. 

4. Optionally, add other code you want to add to your pages by default, lil<ea comment blocl< with a 
copyright notice. 

5. Save all changes and then choose File o Export Template. In the dialog box that follows, select 
Item Template and choose your programming language from the drop-down list at the bottom of 
the screen, shown in Figure 6-9. 



This wizard will allow you to export a project or project item from the current solution to a template which future projects can 
then be based upon. 

Which type of template would you tike to create? 
' Project template 

A project template will allow a user to create a new project based on your exported project. A user will be able to utilize 
your template from the New Project dialog box for client projects and from the New Website dialog box for websites. 

Item template 

An item template will allow a user to add your item to one of their existing projects. Your template will be available to the 
user from the Add New Item dialog box. 
From which project would you like to create a template? 

I Site V 
What language category should this template appear under in the New Project dialog box? 

[visual C# V 


Next> 


Cancel 


FIGURE 6-9 


6. Clicl< N ext and place a checl< mark in front of Temporary, aspx, which you find near the bottom 
of the list. Click N ext again to go to the Select Item References dialog box. 

7. There is no need to set anything in the Select Item References dialog box now. If you had a web 
page referencing specific assemblies ( .dii files) you could pick them here, so VS adds the references 
for you automatically next time you add a file based on this template. Click N ext again to go to 
the Select Template Options screen. TypeMyBasePage as the new template name, and optionally 
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type a short note describing tlie purpose of tlie tempiate. M ai<esure tlie Automaticaiiy Import tlie 
Tempiate into Visuai Studio option is cliecl<ed. Figure 6-10 siiows tiie final dialog box. 



MyBasePage 


Template description: 

I Used in the Planet Wrox site to create pages that are based on a central BasePage and a Master Page. 
Icon Image: 

Browse... 


Browse... 


I C:\User5\lmar\D0cumenti\Visual Studio 2Q12\My Exported Templates\MyBasePage.zip 
0 Automatically import the template into Visual Studio 


\y\ Display an explorer window on the output files folder 


< Previous 


Next > 1 

Finish 


Cancel 


FIGURE 6-10 

8. Clicl< Finish to create the template. VS opens a File Explorer (Windows Explorer in Windows 7) 
showing a copy of the new template as a zip file. You can close that window, because you don't 
need it. 

If you want to carry out this exercise for both VB.N ET and C#, be sure to rename the resulting 
zip file first before you mal<e an export for the second language; otherwise the zip file gets over- 
written. To rename the file, open File Explorer, go to your Documents folder and then browse to 

visual Studio 2 012\Templates\ltemTemplates. You'll find a file Called MyBasePage . zip, 

which you can rename to something lil<e MyBasePagecs.zip. N ote that the file's location is differ- 
ent from the one you see in Figure 6-10; the output location contains just a copy of the exported 
template that you can use as a backup. 

9. Bacl< in VS, delete the temporary file Temporary, aspx you created. Then right-click the website 
in the Solution Explorer and choose Add c> Add N ew Item. N ote that your custom template now 
shows up in the list of templates, shown in Figure 6-11. If you click it, VS shows you the descrip- 
tion you gave it earlier. N ote: you may have to restart VS and reopen your website for the template 
to appear. 

10. Type a new name for the page, such as Testpage.aspx, and click Add to add it to your site. Look 
at the markup and the Code Behind of the file and verify that $reiurinamespace$_$safeitemn 


Preview Image: 


Output location: 
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ame$ has been renamed to _TestPage to reflect the new name of the page. If everything looks OK, 
you can delete TestPage.aspx because it's not used in the Planet Wrox website. 


visual Basic 
Visual C« 


Sort by: Default 


m 

MyBasePage 

Visual Ce 

Web Form 

Visual C* 

l@l Content Page (Razor) 

Visual Cs 

Ennpty Page (Razor) 

Visual C» 

Helper (Razor) 

Visual C« 

Layout Page (Razor) 

Visual C* 

5^" Web API Controller Class 

Visual C* 

\^o\ Web Page (Razor) 

Visual C* 


MyBasePage.aspx 


Search Installed Templates (Ctrl+E) - 
Type: Visual C* 

Used in the Planet Wrox site to create 
pages that are based on a central 
BasePage and a Master Page. 


n Place code in separate file 
Q Select master page 


Add 


Cancel 


FIGURE 6-11 


How It Works 

W hen you export the template, Visual Studio creates a zip file with the necessary files— an ASPX file 
and a Code Behind file in this exercise. This zip file is then stored in the itemTempiates subfolder 
of the visual studio 2 012 folder under your Documents folder. Some of the files in the zip file con- 
tain the placeholders $rGlurlnamGspace$ and $safei temname $. When you add a new file to the site 
that is based on your template using the Add N ew Item dialog box, VS replaces $reiurinamespace$ 
with the name of the folder (nothing, in the case of a file added to the root of the site) and $safeitem- 
name$ With theactual name of the page. In this exercise, you typed TestPage.aspx as the new name 
for the page, so you ended up with a class in the Code Behind called _TestPage, which in turn inherits 
from the global BasePage. The underscore (_) is hard-coded between the two placeholders and is really 
only needed when adding a Web Form based on this template to a subfolder. H owever, it's a valid start 
of a class identifier so you can safely leave it in for pages at the root of your website. If you add a fileto 
a subfolder, such as the Demos folder, the class name is prefixed with the name of the folder so you end 

up with a class called Demos_TestPage. In addition to $relurlnamespace$ and $saf eitemname$, yOU 

can use a few other placeholders. Search the M SDN site at http://msdn.microsoft.com for the term 
Ssarei temname $ to find the other template parameters. 

If you need to makea change to the exported template, either redo the entire export process, or manu- 
ally edit the files in the zip file. 
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With this exported template you now have a very quici< way to add pages to your site that inherit from 
the BasePage ciass. You don't need to manuaiiy change the Code Behind of theciassfiie or the mari<up 
of the page anymore. 


In addition to master pages and the central BasePage class, you have more options to create consis- 
tent-looking websites. One of them is themes. 


THEMES 

So far you've seen how to create a master page to define the global 
lool< and feel of the pages in your site. You also saw how to cen- 
tralize the behavior of your pages by using a central base page. 
However, you have more ways to influencethe lool< and feel of 
your site: themes and sl<ins. Sl<ins are dealt with later in the chapter 
because they are an optional part of themes, which need to be dis- 
cussed first. 

A theme is a collection of files that defines the look of a page. A 
theme typically includes skin files, CSS files, and images. You define 
themes in the special App_Themes folder in the root of your website. 
Within this folder you create one or more subfolders that define the 
actual themes. Inside each subfolder, you can have a number of files 
that make up the theme. Figure 6-12 shows the Solution Explorer 
for a website that defines two themes; M onochromeand DarkGrey. 

A link to each CSSfilein the theme folder isadded to your page's figure 6-12 
<head> section automatically whenever the theme is active. You see 

how this works later. The images in the theme folder can be referenced from the CSS files. You can 
use them to change common elements of the website, such as background images, or images used in 
bulleted lists or navigation lists. 

To create a theme, you need to do the fol low i ng: 

Create the special App_Themes folder if it isn't already present in your site. 

>■ For each theme you want to create, create a subfolder with the theme's name, like 
M onochromeor DarkGrey in Figure 6-12. 

> Optionally, create one or more CSS files that will be part of the theme. Although naming the 
CSS files after the theme helps in identifying the right files, this is not a requirement. Any CSS 
file you add to the theme's folder isadded to the page at run time automatically. 

>• Optionally, add oneor moreimagesto the theme folder. The CSS files should refer to these 
images with a relative path as explained later. 


o o (2t 'o • a 

Search Solution Explorer (Ctrt+;) fi - 

^ Solution 'StteVB' (1 project) 
J © SrteVB 

> App_Code 


^ O App_Themes | 


^ Q DarkGrey 
^ ^ Images 

0 Header.jpg 
|0| DarkGrey.css 
^ ^ Monochrome 
^ ^ Images 

0 Header.jpg 
E MenuBackground.jpg 
E Sidebarjpg 
[j) Monochrome.css 

> 0 Controls 

> 0 Demos 

> £ MasterPages 
t> ^ Scripts 

d Styles 

> ^ Default. aspx 

> ^ Login. aspx 

packages. config 
Q Web. config 
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>- Optionally, add one or more skin files to the theme folder. Skins enable you to define Individ- 
ual properties (such as Forecoior and cssciass) for a specific control that are then applied 
at run time. 

After you have followed these steps, you can configure your site or an Individual web page to make 
use of this theme. To be able to set up the correct theme, you should be aware that two types of 
themes exist. 

Different Types of Themes 

An ASP.N ET page has two different properties that enable you to set a theme: the Theme property 
and the styiesheetTheme property. Both of these properties use the themes that you deflnein the 
App_Themes folder. Both of these properties take their default value from theweb.configflleas 
you'll see later. Although at first they seem very similar. It's their runtime behavior that makes the 
difference. The styiesheetTheme Is applied very early In the page's life cycle, shortly after the page 
Instance has been created. This means that an Individual page can override the settings from the 
theme by applying Inline attributes on the controls. So, for example, a theme with a skin file that 
sets theBackcoior of a button to blue can be overridden by the following control declaration In the 
markup of the page; 

<asp:Button ID="Buttonl" runat= " server " Text="Button" BackColor="Red" /> 

The theme In the Theme property, on the other hand. Is applied late In the page's life cycle, effec- 
tively overriding any customization you may have for Individual controls. 

Choosing Between Theme and StyleSheetTheme 

Because properties of the styiesheetTheme can be overridden by the page, and the Theme 
In turn can override these properties again, both serve a distinct purpose. You should set 
the StyiesheetTheme If you Want to supply default settings for your controls. That Is, the 
StyiesheetTheme Can supply defaults for your controls, which can then be overridden at the page 
level. You should use the Theme property Instead If you want to enforce the look and feel of your 
controls. Because the settings from the Theme cannot be overridden anymore and effectively over- 
write any customlzatlons, you can be assured that your controls look the way you defined them In 
the theme. There Is one exception: by setting EnabieTheming on the control to False you can dis- 
able theming for that control. You see this property and Its effect toward the end of the chapter. The 
Planet Wrox sample site In this book uses the Theme property. 

Applying Themes 

To apply a theme to your website, you have three different options: at the page level In the page 
directive, at the site level by modifying the web. config file, and programmatlcally. 

>■ Setting the theme at the page level. Setting the Theme or styiesheetTheme property at the 
page level Is easy, just set the relevant attribute In the page directive of the page: 

<%@ Page Language="VB" AutoEventWireup=" false" CodeFile="Def ault . aspx. vb" 
Inherits="_Default" Theme="DarkGrey" %> 
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Replace Theme with styiesheetTheme to apply a theme whose Settings can be overridden by the 
individual controls. Figure 6-13 shows that as soon as you typeTheme=, VS pops up with a list 
with all the themes it finds in the App_Themes folder. 


Defaultaspx* -B X 


3="true" CodeFile="Default.aspx.cs" Inherits="_Def ault" Theiiie="" %> 

IDarlcGrey 
Monochrome 


FIGURE 6-13 


> Setting the theme at the site ievel. To enforce a theme throughout the entire website, you can 
set the theme in the web.conf ig file by adding a theme or styiesheetTheme attribute to the 
<pages> element inside the <system.web> element: 

<pages theme="DarkGrey" styleSheetTheme="DarkGrey"> 
</pages> 

M ake sure you type these attributes exactly as shown here because the X M L in the web 
.conf ig file is case Sensitive. The attributes you set here are then applied to the Theme and 
StyiesheetTheme properties of the Page class, as you See later. 

>" Setting themes program maticaiiy. The third and final way to set a theme is programmatically 
through code. You see how this worl<s in a later exercise. 

The next Try It Out exercise shows you how themes work. You create a theme, add the necessary 
CSS, and then configure the application to use the new theme. 


TRY IT OUT 


Creating a New Tlieme for Your Website 


In this exercise you create two themes; M onochromeand DarkGrey. For 
each theme, you add theCSS layout, which isapplied to the site auto- 
matically. You configure theapplication to use one of the themes and 
then switch to the other to see the differences. 

1. Add the special App_Themes folder to your website. To do this, 
right-click the website in the Solution Explorer and choose Add 
o Add ASP.N ET Folder o Theme. This not only creates the App_ 
Themes folder, but immediately creates a subfolder for the theme 
called Themei by default. Type Monochrome as the new name 
instead. Your Solution Explorer should now look like 
Figure 6-14. 

2. From the styles folder, move the styles, ess file into this new 
Monochrome folder. You Can either drag it directly into the new figure 6-i4 
folder or useCtrl-f-X to cut thefile, click the Monochrome folder, 

and press Ctrl-f-V to paste it again. You can leave the empty styles folder because it's used again 
later. 


Solution Explorer 

n X 

(ii '0 • « 

a[p] 

Search Solution Explorer (Ctrl-*-;) 

fi- 

Solution 'Site' (1 project) 


A @ Site 

1 

> ^ App_Code 

^ £] App_Themes 


@ Monochrome H 

> ^ Controls 


> £ Demos 


^ fii MasterPages 


> Scnpts 


A Q Styles 


|0| Styles. CSS 


> ^ Default.aspx 


> ^ Login. aspx 



232 I CHAPTERS CREATING CONSISTENT LOOKING WEBSITES 


To make it clear later where your CSS Is coming from, rename the file from styles, ess to 
Monochrome. CSS. You Can rename It by selecting It and pressing F2 or by right-cllcking It and 
choosing Rename. 

Because the main layout Is now going to be controlled by the theme, you no longer need the 
<iink> element In the <head> section of the master page pointing to the old CSS file, so you can 
remove It. To this end, open the master page, switch to M arkup View, and remove the following 
highlighted line from the code: 

<head runat="server"> 
<title></title> 

<asp : ContentPlaceHolder ID="head" runat="server"> 
</asp : ContentPlaceHolder> 

<link href =".. /Styles/Styles .CSS" rel="stylesheet" type="text/css" /> 

5. The next step Isto apply the theme to the entire website. Open the web. config file from the root 
of the site and directly Inside the <system.web> element, create a <pages> element with a theme 
attribute pointing to the M onochrome theme. There's no support for themes In Intel 1 1 Sense In the 
Web . conf ig file SO you need to type the name yourself. 

<system.web> 

<pages theme= "Monochrome" /> 

6. To test the theme, save all your changes and then request the Default .aspx page In your browser. 
The design of the site should be Identical to how It was. 


COMMON MISTAKES If you get an error about an invalid page title, go back to 
Visual Studio and change the Title attribute of the ® Page directive of Default 
. aspx to "Welcome to Planet Wrox." If your design doesn't look as it should, 
press Ctrl+F5 or Ctrl+R in the browser This forces a hard refresh, which means 
you get the latest version of the files from the server instead of a cached local 
copy of the page. 


Instead of linking to the CSS file from the master page, the CSS Is now Included In the page source 
through the theme set In the web. conf ig file. To see how this works, open the H TM L source of 
the page In the browser. At the top you should see the following code (I altered the layout for bet- 
ter readability): 

< IDOCTYPE html> 

<html xmlns="http : / /www. w3 . org/ 19 99 /xhtml " > 
<head> 

<title>Welcome to Planet Wrox</title> 

< script src=" / Script s/modernizr- 2 .5.2.js"></ script > 

<link href=" App_Themes /Monochrome /Monochrome .ess" 
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type="text/css" rel=" stylesheet" /> 

</head> 
<body> 

N otethat a link to the stylesheet from the Monochrome theme folder is injected in the <head> of 
the page. The ASP. N ET run time does this for every CSS file it finds in the currently active theme 
folder (in alphabetical order), so besureto keep your theme folder clean to avoid unnecessary 
files from being included and downloaded by the browser. Also note that the <iink> is added just 
right before the closing </head> tag. This ensures that the theme file is included after all other 
files you may have added yourself (through the master page, for example). This is in contrast to 
how the styiesheetTheme attribute works. Because thistype of themeallowsits settings to be 
overridden, it's imported at the top of the file, giving room for other CSS files that follow it to 
change the look and feel of the page. 

7. Return to Visual Studio and open the master page file in Design View. N otice how all the design is 
gone and VS now shows the basic layout of the page again. Unfortunately, VS does not display the 
theme you've set using the theme attribute. H owever, you can overcome this limitation by setting 
the StyiesheetTheme instead. To do this. Open the Web. config file again, locate the <pages> ele- 
ment you created earlier, and add the following attribute: 

<pages theme= "Monochrome" styleSheetTheme="Monochrome" ... /> 

8. Save the changes to web. config, close and reopen the master page, and switch to Design View. 
You'll see that VS now applies the correct styling information to 
your pages. 

9. To add another theme to the site, create a new folder under App_ 
Themes and Call it DarkGrey. N ext. Open the folder where you 
extracted the downloaded code that comes with this book. 
If you followed the instructions in the introduction of this book, this 
folder is located at c : \BegASPNET\Resources. If you don't have 
these files yet, they are available at www.wrox.com/remtitie 
.cgi?isbn=iii83ii809. 0 pen the Chapter 06 folder and then 
the DarkGrey folder. Position the File Explorer and VS side by side 
and then drag the file DarkGrey. ess from FileExplorer into the 
DarkGrey theme folder in VS. If dragging doesn't work for you, you 
can useCtrl-fC in File Explorer to copy the file, and then use Ctrl +V 
in VS to paste the file in the right folder. Your Solution Explorer 
should now resemble Figure 6-15. 

You add the images that the CSS file refers to in a later exercise. 

10. Open the Web. config file once more and change both occurrences of Monochrome to DarkGrey in 
the<pages> element. Save the changes again and press Ctrl 4f 5. Instead of theblueM onochrome 
theme, you'll now see the site with the DarkGrey theme applied as is visible in Figure 6-16. If you 
don't see the menu placeholder, the main content, and the sidebar all next to each other, make sure 
your browser window is wide enough to display all content. 


Search Solution Explorer (Ctrl+;) fi - 

Solution 'Site' (1 project) 
@ SKe 

> ^ App_Code 


i] App_Themes 


A £ DarkGrey 

DarkGrey.css 
A ^ Monochrome 

^ Monochrome.css 

> 0 Controls 

> ^ Demos 

> li MasterPages 

> Scripts 
0 Styles 

> Default. aspx 

> ^ Login. aspx 

Q packages.config 
<0 Web.config 


FIGURE 6-15 
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FIGURE 6-16 


If you don't seethe new theme appear, close all open browsers, ensure you changed web.config cor- 
rectly, and open Default. aspx again. If you still don't seethetheme, press Ctrl -ff 5 or Ctrl-ffl in your 
browser to force it to get a fresh copy from the server. 

How It Works 

In this exercise you first applied the M onochrome theme by changing the <pages> element in the web 
.config file. W hen the run time sees that a theme is active, it scans the associated theme folder for 
.CSS files and includes a link to all those files in the page's <head> section in alphabetical order. In the 
case of the M onochrome theme it finds the file Monochrome, ess and adds it to the <head> section auto- 
matically. An identical process took place when you changed thethemeto DarkGrey. Thelinked style 
sheet then influences the way the page is displayed in the browser by changing the layout and colors 
used in the page. 

To enable design-time support in Visual Studio, you need to change the styiesheetTheme in the web 
.config file as well. The only downside of this is that the relevant CSS file is now included twice: once 
for the Theme and once for the styiesheetTheme. Because the exact same file is included twice, it 
doesn't affect the layout of the site. All the selectors in the second file simply overrule those in the first. 
H owever, if you feel this duplication is a waste of CPU cycles, you should delete the styiesheetTheme 
attribute from the web.config file when you go livewith the application. 

The layout of the page is changed radically because of the CSS in the DarkGrey. ess file. If you want to 
know what CSS the file contains and what elements of the page it changes, open it up in VS. It has lots 
of comments describing each selector in detail. 
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ASP.N ET themes are not limited to just CSS files. As you learn next, themes can also contain images 
and skin files. 


Extending Themes 

In addition to CSS files and skins (discussed toward the end of this 
chapter), a theme can also contain images. The most common use 
of theme images is referring to them from your CSS. To put this to 
good use it's important to understand how CSS refers to images. 

By design, an image referred to by a CSS selector will be searched 
for relative to the location of the CSS file, unless you give it a path 
that starts with a forward slash (/) to indicate the root of the site. 
Consider, for example, the App_Themes folder depicted in 
Figure 6-17. 

To refer to theMenuBackground.jpg file in the Images folder of the 
M onochrome theme, you can add the following CSS to Monochrome 

. ess! 

nav 
{ 

background- image : url {Images/MenuBackground. jpg) ; 

} 

If you wanted to refer to an image in the images folder in the root of 
the site, you would use this CSS: 


Solution Explorer ▼ □ X 



Search Solution Explorer (Ctrl+;) 


Solution 'Site' (1 project) 


A 0 Site 


> ^ App_Code 


^ App_Themes 


DarkGrey 
^ Images 

0 Header.jpg 
1^ DarkGrey.css 
^ Monochrome 
J £ Images 

Q Header.jpg 

MenuBackground.jpg 
S Sidebar.jpg 
Button.skin 
Monochrome.css 
^ Controls 
£ Demos 
0 MasterPages 
S Scripts 
0 Styles 
^ Default.aspx 
^ Login. 3Spx 
Q packages.config 
<Q Web.config 


FIGURE 6-17 


background- image : url ( /Images/MenuBackground. jpg) ; 

N otethe leading forward slash in front of the image path to indicate the root of the site. This latter 
syntax is useful if you want to share images between different themes. Simply put them in a folder 
outside a specific theme, I ike an images folder at the root, and then use this root-based syntax to 
refer to them. The next chapter digs a lot deeper into the different forms a URL can take to refer to 
a resource like an image. 


TRY IT OUT 


Adding Images to Your Theme 


In this Try It 0 ut you add the images and CSS files to the site to complete both themes. You overwrite 
the file Monochrome. CSS in the M onochrome theme, so if you madeany customizationsyou would like 
to keep, create a backup of it first. 

1. Open File Explorer and navigate to the files you extracted from the zip file for this chapter (at c:\ 
BegASPNET\Resources). 0 pen the Chapter 06 folder and then the Monochrome folder. Select the 

Images folder and the Monochrome . CSS file. 

2. Drag (or copy and paste) the selected folder and files from File Explorer into the Monochrome 
theme folder in VS. Click Yes when you're asked to overwrite Monochrome, ess. 
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3. Repeat steps 1 and 2, but this time drag (or copy and paste) only tlie images folder from the File 
Explorer's DarkGrey folder into theDarkGrey theme folder in VS. Your Solution Explorer now 
lool<s lil<e Figure6-17. 

4. 0 pen up the master page from the MasterPages folder, and remove the text Header Goes Here 
from the <header> element. M ake sure you don't accidentally remove the <a> element, which 
should now be empty. 

5. Request Default .aspx in your browser by right-clicl<ing it and choosing View in Browser. You 
should now seetheweb pagewith images from the Darl<Grey theme, shown in Figure6-18, that 
displays the page in Apple's Safari. 


Welcome to Planet Wrox 


brU CD 


I + |0http; //localhost;49m/ 

Hi: Apple Yahoo! Google Maps YouTube Wikipedia News' Popular ▼ 


~C] | CX- Google 



Sidebar Goes Here 


Hi there visitor and welcome to Planet Wrox 


We're glad you're paying a visit to 
site on the Internet. 


, the coolest music community 


Fee! free to have a . -. 9ro 
pictures to be found here. 


; there are lots of interesting reviews and concert 


Footer Goes Here 


FIGURE 6-18 


6. Go bacl< to VS, open theweb.config file, and switch the two theme attributes of the <pages> ele- 
ment from DarkGrey to Monochrome again. Open Default, aspx in your browser and you'll see 
the page with the new theme and images as shown in Figure 6-19 that displays the page in Google 
Chrome. If you still seethe old page, press Ctrl -ff 5 to cause a hard refresh. 
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Sidebar Goes Here 


Hi there visitor and welcome to Planet Wrox 

We're glad you're payir)g a visit to wm. PtarietWrox. com, the coolest music commur)it\/ site on the Internet. 
Feel free to have a look around; there are Ms of inleresling Kviewsand concert pictuKS to be found here. 
You can log in here 



FIGURE 6-19 


How It Works 

From a theme point of view, notliing lias clianged in tli is exercise. J ust as you saw before, tlie tlieme's 
style slieet is added to tlie liead of tlie page. H owever, tliis time tlie style sheet points to images located 
in the theme folder. The browser reads the CSS file, followsthelinl< to theimages, downloadsthem, 
and then displays them at the right location as dictated by the various CSS selectors in the code file. 


The CSS files you added for both themes contain a lot of comments, so if you want to l<now what the 
CSS does, check out the files in the two theme folders. 
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Useful as themes may be to enable you, the page developer, to quickly change the appearance and 
even the layout of the site, they become even more useful If you let your users switch them at run 
time. This way, users can customize the site to their liking. The next section shows you how to 
accomplish this. 

Dynamically Switching Themes 

Switching themes at run time has a few benefits. For example, you can please your users by enabling 
them to choose a theme with the colors and layout they like. N ot everyone appreciates a dark back- 
ground with white text, so the option to change that at run time Is something that many people like. 
H owever, you can also deploy themes to help visually Impaired users. By creating a theme that has a 
high-contrast color scheme and a large font size, you make It much easier for people to see your site. 
The themes In the Planet Wrox website only change screen elements like colors and layout, but It's 
easy to create a copy of one of those themes and then change the font size and the color scheme. 

Because of the way themes are applied to a page at run time, you need to set the theme early on In 
the page's life cycle. In thepremit event to be precise. The base page of the website Is once again 
the Ideal location to do this, because every page In the site Inherits from this class. 

To enableusersto change the theme, you can offer them a drop-down menu that automatically 
posts back to the server when they change the active option In the list. At the server, you get the 
chosen theme from the list, apply It to the page, and then store the selection In a cookie so It can be 
retrieved on subsequent visits to the website. 

Cookies are little pieces of text that you can store on the user's computer. The data you store In a 
cookie Is sent only to the server that set It In the first place, so other sites can't read the cookie from 
yours. However, because cookies are stored on the user's computer as plaintext, you should never 
use them to storeany sensitive data, such asa password. Storing harmless data I Ike the preferred 
theme Is an excellent use of cookies, though. 

To create a cookie so It's stored on the user's computer, you use the cookies collection on the 
Response object. ThIs Way, the cookie Is sent to the browser along with the response. H ere's a quick 
example: 

VB.NET 

Dim myCookie As HttpCookie = New HttpCookie ( "CookieName" ) 
myCookie . Expires = DateTime .Now. AddMonths (3 ) 
myCookie .Value = "Cookie value" 
Response . Cookies .Add (myCookie) 

C# 

HttpCookie myCookie = new HttpCookie ( "CookieName" ) ; 
myCookie . Expires = DateTime .Now. AddMonths (3 ) ; 
myCookie .Value = "Cookie value"; 
Response . Cookies .Add (myCookie) ; 

This code sends the cookie to the browser where It will be stored until It expires, which In this 
example Is three months from the day the cookie Is set. For each request to a page, the browser 
sends this cookie back to the server where you can read It again using the cookies collection of the 
Request object, llkethls: 
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VB.NET 

Dim myCookie As HttpCookie = Request . Cookies . Get { "CookieName" ) 
If myCookie IsNot Nothing Then 

Labell.Text = myCookie .Value ' Would display "Cookie value" 
End If 

C# 

HttpCookie myCookie = Request . Cookies .Get ( "CookieName" ) ; 

if (myCookie != null) 

{ 

Labell.Text = myCookie .Value ; // Would display "Cookie value" 

} 

In thefollowing two exercises you see how to implement the functionality to switch themes dynami- 
cally. The first exercise guides you through modifying the master page to enable the user to select a 
theme. This exercise only retrieves the name of the theme the user selects and stores it in a cool<ie. 
The second exercise then shows you how to apply that theme at run time to every page that inherits 

from BasePage. 


NOTE There has been a lot of debate about cookies and whether or not 
they can harm your privacy. Generally, cookies are safe, because they only 
store data that the server that sets it already has. They can't be used to steal 
sensitive data from your computer if you haven't given this data to the server 
yourself In most scenarios, cookies improve the user's browsing experience by 
remembering little pieces of data instead of asking you every single time you 
visit a page. Unfortunately, some large corporations like advertising agencies 
use a unique cookie to track your trails on the web, giving them some global 
idea of the sites you visit. To ensure that visitors to your site understand what 
information you have and keep about them, it's usually a good Idea to add a pri- 
vacy statement to your site describing the Intent and usage of cookies and any 
personal data you may keep. Be aware that In Europe you must comply with the 
"cookie law" that doesn't allow you to create cookies without the user's consent. 


UjUmSjQI Letting the User Select a Theme 

In this exercise you add a oropoownList control to the master page. This control contains the available 
themes so a user can choose one. The user's choice is stored in a cool<ieso it's available again later. The 
final step is to preselect the correct theme in the drop-down list when the user revisits the page. 

1 . Open the master page in M arkup View and locate the <aside> element. Remove the static text 
Sidebar Goes Here and replace it With a DropDownList control by dragging it from the Toolbox 
between the two <div> tags. C hange the id of the control from DropDownListi to ThemeList. 
Type some text (for example, Select a Theme) followed by a line breal< (<br />) in front of the 
drop-down list to clarify the purpose of the list. 

2. Open the control's Smart Tasks panel (in Design View or M arkup View), and select Enable 
AutoPostBack. 
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3. 


4. 


On the same Smart Tasks panel, click the Edit Items link and insert two items: one with the text 
M onochromeand one with the text DarkGrey. 


Double-click the drop-down list in Design View to set 
up an event handler for the seiectedmdexchanged 
event. Instead of double-clicking, you can also select the 
DropDownList, press F4 to Open its Properties G rid, click 
the button with the lightning bolt to switch to the Events 

tab, and double-click seiectedmdexchanged. 

Figure 6-20 shows the Properties G rid in Events mode. 

As you saw earlier, you could also add this event handler 
in M arkup View on the control declaration directly. 


ThemeLtst System.Web.UI.WebControls.DropDownLis • 
B Action •* 

H^fflffiiirmim'i b 

TextChanged 
B Data 

CallingDataMethods ^ 
Select edlndexChanged 

Fires when the selected index has been chanqed. 


FIGURE 6-20 


Any code you write in the seiectedmdexchanged handler fires at the server when the user 
makes a new selection in the drop-down list at the client. Within the handler block, add the fol- 
lowing bolded codethat retrieves the selected theme from thelistand stores it in a cookie: 


VB.NET 

Protected Sub ThemeList_SelectedIndexChanged (sender As Object, 
e As EventArgs) Handles ThemeList . SelectedlndexChanged 

Dim pref erredTheme As HttpCookie = New HttpCookie ( "Pref erredTheme" ) 

preferredTheme. Expires = DateTime.Now.AddMonths (3) 

pref erredTheme .Value = ThemeList . SelectedValue 

Response . Cookies .Add (preferredTheme) 

Response. Redirect (Request. Url.ToStringO ) 
End Sub 

C# 

protected void ThemeList_SelectedIndexChanged (object sender, EventArgs e) 
{ 

HttpCookie preferredTheme = new HttpCookie ( "Pref erredTheme" ) ; 
pref erredTheme. Expires = DateTime.Now.AddMonths (3) ; 
pref erredTheme .Value = ThemeList . SelectedValue; 
Response . Cookies .Add (preferredTheme) ; 
Response. Redirect (Request. Url.ToStringO ) ; 

} 

5. Still in the Code Behind of the master page, you need to add some code that preselects the cor- 
rect item in the list again when the page loads. The best place to do this is in the page class's Load 
event. If you're using C#, the page_Load handler should already be there. When you're using 
Visual Basic you can add one in two different ways: either double-click the page anywhere in 
Design View (this works in C#as well), or select (Page Events) from the left drop-down list just 
above the Document Window in the Code Behind (shown in Figure 6-21), and then choose Load 
from the second drop-down. This is a nice way to add handlers for other controls as well, like 

Button and DropDownList COntrolS. 
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FIGURE 6-21 


Within tlie liandier bioci< tliat VS added for you, add tliefoiiowing code: 

VB.NET 

Protected Sub Page_Load{ sender As Object, e As EventArgs) Handles Me. Load 
If Not Page. IsPostBack Then 

Dim selectedTheme As String = Page. Theme 

Dim pref erredTheme As HttpCookie = Request . Cookies . Get ( "PreferredTheme" ) 
If pref erredTheme IsNot Nothing Then 

selectedTheme = pref erredTheme .Value 
End If 

If Not String. IsNullOrEmpty (selectedTheme) Then 

Dim item As Listltem = ThemeList . Items . FindByValue (selectedTheme) 
If item IsNot Nothing Then 

item. Selected = True 
End If 
End If 
End If 
End Sub 

C# 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

if (! Page . IsPostBack) 
{ 

string selectedTheme = Page. Theme; 

HttpCookie pref erredTheme = Request. Cookies. Get ("PreferredTheme") ; 
if (pref erredTheme != null) 

{ 

selectedTheme = pref erredTheme .Value; 

} 

if ( ! string. IsNullOrEmpty (selectedTheme) ) 
{ 

Listltem item = ThemeList . Items .FindByValue (selectedTheme) ; 

if (item != null) 

{ 

item. Selected = true; 

} 

} 

} 

} 
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6. Save all changes and then request Default .aspx in your browser again. The drop-down list in the 
sidebar should display the first item in the list as selected. Select the other option from the list and 
the page will reload. The item you chose last in the drop-down list should now be preselected 
in the drop-down list. Close your browser and then browse to Default, aspx again. The theme 
you chose should still be selected in the drop-down list. Notice that you l<eep seeing the same 
theme because you haven't written any code yet that applies the selected theme. Y ou see how to do 
that in a later exercise. 


COMMON MISTAKES If you get an error, make sure you have no typos in the 
code. If nothing seems to happen (for example, the page doesn't post back), 
check if you set the AutoPostBack attribute on the DropDownList control to 
True. Also, check the spelling of the name of the cookie fpref erredThemej in 
both code blocks. Finally If the correct item Is not preselected after a postback 
or after you close and reopen your browser, check you browser's or computer's 
security settings. You may have configured your browser to delete cookies 
when you close the browser, or you may have security software running on your 
machine that blocks cookies altogether If you can't make it work in one browser, 
try it in another to rule out problems with the code. 


How It Works 

You made three important changes to the master page. First, you added the drop-down list and set 
AutoPostBack to True. T hi s causes the page to submit itself back to the server as soon as you choose 
a new item in the list. W hen that happens, the code in the seiectedmdexchanged handler fires. This 
code creates a cool<ie that can be stored on the user's computer. To mal<e the cookie last between 
browser sessions, you need to set the Expires property. In the code example, the cookie is set to expire 
three months from now, which means the browser will discard it automatically after that period. Every 
timethe user chooses a new theme, this date is extended, setting it for another three months: 

VB.NET 

Dim pref erredTheme As HttpCookie = New HttpCookie ( "Pref erredTheme" ) 
preferredTheme . Expires = DateTime .Now. AddMonths (3 ) 

C# 

HttpCookie preferredTheme = new HttpCookie { "Pref erredTheme" ) ; 
pref erredTheme . Expires = DateTime .Now. AddMonths (3 ) ; 

After the cookie has been created, you can set its value property. In the example, the seiectedvaiue 
of the DropDownList (contai ni ng the name of the theme) isstored in the cookie. The cookie is then 

added to the cookies collection using Response, cookies. Add: 
VB.NET 

pref erredTheme .Value = ThemeLlst . SelectedValue 
Response . Cookies .Add (preferredTheme) 
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C# 

preferredTheme .Value = ThetneList . SelectedValue ; 
Response . Cookies .Add (preferredTheme) ; 

N ote that the cookie is added to the cookies collection of the Response object that is associated with 
the response to the user. Later you see how to read this cool<ie again from the cookies collection of the 
Request object that is associated with the request the user is mal<ing for a page. 

The final step is to redirect the user to the same page: 

VB.NET 

Response .Redirect (Request .Url . ToString ( ) ) 
C# 

Response . Redirect (Request .Url . ToString ( ) ) ; 

This is necessary because otherwise the new themewon't be applied immediately. Because the theme 
needs to be set early in the page's life cycle, it can no longer beset for the current request. By redirect- 
ing the user to the same page, a new request is made that can successfully apply the selected theme. The 
next exercise shows you the code to set the selected theme programmatically. 

The final change in the master page you made was a modification to the page_Load handler. Inside this 
method, a string variable is declared that holds the currently active theme by looking at page. Theme. 
This serves as the default theme and will be the one that is preselected in the drop-down list if the 
user doesn't have a cookie holding her preferred theme. The code then sees if there is a cookie called 
PreferredTheme. If it exists, its value is used to give the string seiectedTheme a new value. In the end, 
this string Variable is then used to find the item in the drop-down list and preselect it. 

This way, the drop-down list always displays the currently configured site theme or the item the user 
has chosen manually, even if she comes back to the site next week. N ote the use of the FindByvaiue 
method on the items collection of thenropDownList control. This method returns the item if it is 
found or Nothing (null in C #) When the item isn't there. This ensures that if the cookie contains a 
theme that is no longer available, the code doesn't try to preselect an item in the list that doesn't exist. 


With the ability to let a user select a theme in place, the next step is to apply the chosen theme. 

As you learned previously, the theme needs to be set in the premit event, which takes place early 
in the page's life cycle. Inside this event, you can see if the cookie with the selected theme exists. If it 
does, you can use its value to set the right theme. 

^^^^^^Q Applying the User-Selected Theme 

In this exercise, you modify the base page and add some code for the premit event to set the user's 
theme. 

1. Open the base page file from theApp_code folder and add the following code that sets the selected 
theme during the preinit event. Y ou can add this code before or after the method that checks the 
page title. 
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VB.NET 

Private Sub Page_PreInit (sender As Object, e As EventArgs) Handles Me.Prelnit 
Dim pref erredTheme As HttpCookie = Request . Cookies .Get ( "PreferredTheme" ) 
If pref erredTheme IsNot Nothing Then 

Dim folder As String = Server .MapPath (" ~/App_Themes/ " & pref erredTheme .Value) 
If System. 10. Directory. Exists (folder) Then 

Page. Theme = pref erredTheme .Value 
End If 
End If 
End Sub 

C# 

private void Page_PreInit (object sender, EventArgs e) 
{ 

HttpCookie pref erredTheme = Request . Cookies . Get ( "Pref erredTheme" ) ; 

if (pref erredTheme != null) 

{ 

string folder = Server .MapPath (" ~/App_Themes/ " + pref erredTheme .Value) ; 

if (System. 10 . Directory . Exists (folder) ) 

{ 

Page. Theme = pref erredTheme .Value ; 

} 

} 

} 

For the C# example, you need to include a using statement at the top of the file to bring the 
Request class into scope, lil<ethis; 

using System. Web; 

2. If you're worl<ing with C#, you also need to set up an event handler in the class's constructor for 
the preinit event, just as you did with the preRender event handler in an earlier exercise. This 
tells the ASP. N ET run time which method will handle the Preinit eventi 

public BasePage 0 
{ 

this . PreRender += Page_PreRender ; 
this. Preinit += Page_PreInit; 

} 

3. Save changes to all open documents and then request Default, aspx in the browser. The page 
should load with the theme you chose last in the drop-down list in the previous exercise. 

4. Choose a new item from the list. The page should reload and should now show the other theme. 

If you find that the page in the browser is showing a combination of the two themes, go bacl< to 
VS, open web.config, and remove the styiesheetTheme attribute from the<pages> element, 
leaving the theme attribute in place because it serves as the default for new visitors. If you don't 
see the theme applied, mal<e sure your page is inheriting the BasePage classin the Code Behind. 

How It Works 

W ith the hard worl< of getting the user's favorite theme and storing it in a cool<ie already done, apply- 
ing the theme is now very easy. The code in the premit event handler first verifies whether there is 
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a cookie called pref erredTheme. It does this by comparing the return value of the Get method to 

Nothing (null in C#). 
VB.NET 

Dim pref erredTheme As HttpCookie = Request . Cookies .Get ( "Pref erredTheme" ) 
If pref erredTheme IsNot Nothing Then 

C# 

HttpCookie pref erredTheme = Request . Cookies .Get ( "Pref erredTheme" ) ; 
if (pref erredTheme != null) 

This code uses Request. Cookies to read from the cool<ies that the user's browser sent together with 
the request. If the cookie exists, its value property is used to set the correct theme: 

VB.NET 

Page. Theme = pref erredTheme .Value 
C# 

Page. Theme = pref erredTheme .Value , ■ 

Because the theme is set early in the page's life cycle, this setting is applied throughout the page, effec- 
tively giving the page the look and feel defined in it. To ensure that the code doesn't try to apply a 
theme that (no longer) exists, it uses Directory. Exists that returns true or false depending on the 
presence of the folder on disk. To get at the full path of the theme folder on disk, it uses server 
.Mappath to translate a virtual path into its physical counterpart. You learn more about virtual paths 
in the next chapter, while server .MapPath is discussed further in Chapter 9. 


With the capability to set the theme programmatically, you're offering your users a quick and easy 
way to change the page to their liking. The theme affects colors and layout throughout each page in 
the entire website. Combined with master pages, this gives you a flexible way to influence the look 
and feel of an entire page. It could also be useful if you were able to change certain controls on a 
page. For example, you may have the need to give each button in your site the exact same look. This 
is where the ASP.N ET skins come into play. 


SKINS 

Skins are simple text files that contain markup that enables you to define the look and feel of one or 
more server controls from a central location. Placed in a theme's folder, they are an integral part of 
theASP.NET themes feature. A skin file (with a .skin extension) contains the server-side presen- 
tational elements of a control. These settings are then applied to all the controls to which the skin 
applies. To see how this works, consider the following example that defines the skin— or appear- 
ance— of a Button control: 

<asp:Button BackColor="#cccccc" ForeColor="#308462" runat= " server " /> 

With this skin definition, the buttons in your site will get a Backcoior of #cccccc and a porecoior 
of #3 08462. All you need to do is create a skin file under your theme's folder, add this markup to 
it, and that's it. From then on, all the buttons will be changed automatically. Just as with setting 
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the properties on the controls directly as you saw earlier, these properties, lil<eBackcoior and 
Forecoior, are transformed into client-side H TM L and CSS. 

N ote that this sl<in marl<up is similar to the markup of a button. A few differences exist, though. 
First of all, the control in thesl<in file cannot have an id attribute. The id is used to uniquely iden- 
tify a control in a page, and because the sl<in is applied to all controls, there's no point in giving it 
an ID. Another difference is the number of attributes you can set in the marl<up. N ot all properties 
of a control are skinnable. For example, you can't set the Enabled property of the Button through a 
skin. M icrosoft's M SDN documentation lists for each property whether or not they can be skinned. 
Another way to find out if you can skin a certain property is by simply trying it: just set the property 
in the skin and if you're not allowed to set it, you'll get an error at run time. 

G enerally speaking, properties that influence the appearance (Backcoior, Forecoior, Bordercoior, 
and so on) can be skinned and properties that influence behavior (Enabled, Enabieviewstate, and 
more) cannot be set. 

W hen you create a new skin file using the Add N ew Item dialog box, you get a bunch of text 
wrapped in a server-side comment block. You can safely remove these comments because they only 
give you a short example of how skins work. You can define multiple controls in a single skin file. 
H owever, from a maintainability point of view, it's often easier to name each skin file after the con- 
trol it represents. For example, you would have a file called Button, skin for buttons. Label, skin 
for labels, and so on. 

Instead of applying formatting elements directly to the control's properties in the skin and thus to 
the final markup in the page, it's often better to use the cssciass property to point to a CSS class in 
one of your CSS files. That way, it's even easier to makesitewide changes and you avoid bloating the 
final H TM L. G iven the previous example, a file with the following skin definition and a class in the 
theme's C SS file would give the same effect: 

<asp:Button CssClass= "MyButton" runat="server" /> 

.MyButton 
{ 

color: #308462; 
background- color : #cccccc; 

} 

Creating a Skin File 

Skin files must be created in the theme's folder directly. You can't store them in a subfolder like you 
do with the theme's images. In the following exercise you see how to createa simpleskin fileto 
change the look and feel of all button controls in the website. Later chapters in this book build on 
this knowledge by defining more complex skins for other controls like the Gridview. 

When you start typing in a skin file, you'll notice that the familiar Intel 11 Sense doesn't kick in. This 
makes it slightly difficult to define your controls and their attributes. H owever, there is a simple 
workaround: 

1. Open Visual Studio's Options dialog box by choosing Tools o Options. 

2. Expand theText Editor category and click File Extension. 
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3. In the Extension box, type skin and then from the Editor drop-down iist, choose User 
Control Editor. 

4. Clicl< the Add button and then clicl< the OK button to dismiss the Options dialog box. 

From now on, you'll get IntelliSense in sl<in files (you may need to reopen existing skin files first if 
you already created one). With this setting on, you may get a warning in the Error List about build 
providers when you have a sl<in file open. You can safely ignore this warning, because sl<ins worl< 
fineatruntime even w ith these setti ngs i n V S. 

^^^^^^Q Creating a Skin for the Button Control 

To effectively use skins, you should strive to usecssciass attributes as much as possible instead of 
applying inline attributes that all end up in the final H TM L of the page, increasing its size and load 
time. H owever, to show you how it works in case you do have a special need to add inline attributes, 
this exercise shows you how to apply both. 

1. In the Monochrome theme folder, add a new skin file and call it Button, skin. You add the file by 
right-clicking the Monochrome folder and choosing Add o Skin File. In the dialog box that follows, 
type Button as the filename and click OK. 

2. Delete the entire contents from thefileand type the following code: 

<asp:Button CssClass="MyButton" BackColor= "#509EE7 " runat= " server " /> 

N otethat this markup uses a combination of inline attributes for styling (theeackcoior) and the 
cssciass to point to a selector in your CSS file. Also note that this control does not have an id 
attribute. As explained earlier, you can ignore the warning about missing build providers because 
your skin files will work fine at run time. As soon as you close the skin file, the warning goes 
away. 

3. Open the Monochrome. CSS file from the theme folder and add this CSS selector at the end of the 
file: 

.MyButton 
{ 

color: White; 

} 

4. Create a new Web Form in the Demos folder and call it skinsDemo.aspx. M ake sure you base it on 
the exported M yBasePage template you created earlier. Give the page a Title of skins Demo and 
then add a Button by dragging it from the Toolbox into the cpMaincontent area of the page. You 
end up with this code: 

<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" runat=" Server" > 
<asp:Button ID="Buttonl" runat=" server" Text="Button" /> 

</asp : Content> 

5. Save all changes and then request skinsDemo.aspx in the browser. If necessary, switch to the 
M onochrome theme. The button you added in step 4 should now have a blue background with 
white text on it. If the changed colors don't show up, make sure you selected the right theme in 
the drop-down list and that you added the MyButton CSS class to the CSS file of the M onochrome 
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theme. If you still don't seethe changes, press Ctrl 4f 5 or Ctrl+R to force a fresh copy of the CSS 
file from the server. 

How It Works 

To see how it worl<s, you should take a look at the H TM L for the page in the browser. The Button con- 
trol has been transformed in the following HTML: 

<input type=" submit" name="ctlOO$cpMainContent$Buttonl" value= "Button" 

id="cpMainContent_Buttonl" class="MyButton" style="background-color :#509EE7; " /> 

Both the cssciass and theBackcoior attributes in the skin have been added to the H TM L. The for- 
mer ended up as a class attribute on the button, and the latter has been transformed into a style 
attribute. TheMyButton class in the CSS file gives the button its white text and the inline style deter- 
mines the background color of the button. If you choose the DarkGrey theme in the drop-down list and 
then look at the H TM L again, you'll notice it has no class and style attributes, giving the button its 
default look. 


As you can see, skins are extremely easy to use and enable you to radically change the look of spe- 
cific controls in your site. But what if you don't want all your buttons to change to blue and white 
at the same time? W hat if you need one special button that has a red background? You can do this 
with named skins. 

Named Skins 

N amed skins are identical to normal skins with one exception: they have a skiniD set that enables 
you to refer to that skin by name. Controls in your ASPX pages can then use that skiniD to apply 
that specificskin to the control. The next exercise shows you how thisworks. 


TRY IT OUT 


Creating a Named Skin for the Button Control 


The easiest way to create a named skin is by copying the code for an existing one and then adding a 
SkiniD attribute. Be aware that if you copy and paste a skin definition, VS automatically adds an id 
attribute (that is, if you connected skin files to the User Control Editor as described earlier). This id is 
not allowed, so you need to remove it. 

1. Open Button, skin, copy all the code, and paste it below the existing markup. 

2. If VS added an id attribute, remove it, together with its value (that is, remove id=" Buttoni" ). 

3. Remove the cssciass attribute and its value, change the Backcoior of the button to Red, and set 

the ForeColor tO Black. 

4. Add a skimo attribute of RedButton. Y ou should end up with this code: 

<asp:Button CssClass="MyButton" BackColor="#509EE7" runat= " server " /> 

<asp:Button BackColor="Red" ForeColor= "Black" SkinID="RedButton" runat=" server" /> 

5. Save and close the skin file. 
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6. 0 pen skinsDemo . aspx and add a second button. Set the skiniD of this button to RedButton. 

N otice how IntelliSense helps you pick the right skimn. The code for the two buttons should now 
look like this: 

<asp:Button ID="Buttonl" runat= " server " Text="Button" /> 

<asp: Button ID="Button2" runat= " server " Text= "Button" SkinID= "RedButton" /> 

7. Open SkinsDemo. aspx in the browser. You should now see two buttons; the blue one you added 
earlier and the new black on red one. If you don't see the different colors, ensure you have selected 
the M onochrome theme in the browser. 

How It Works 

N amed skins work almost exactly the same as normal skins. H owever, with a named skin a control can 
point to a specific skin in one of the skin files. In the skinsDemo. aspx page, the first button gets its set- 
tings from the default, unnamed skin, and the other now gets its settings from the skin with its skiniD 
set to RedButton. If you assign a nonexistent skiniD to a control, ASP.N ET will simply ignore it and 
not raise an error. 


With named skins, you have a very flexible solution at your disposal. With the normal skins, you 
can quickly change the appearance of all controls in your site. You can then use a named skin to 
override this behavior for a few controls that you want to look different. 

Disable Theming for Specific Controls 

If for some reason you don't want to apply a skin to a specific control, you can disablethe skin by 
setting the EnabieTheming property of the control, like this: 

<asp:Button ID="Buttonl" runat=" server" EnableTheming="False" Text="Button" /> 

With EnabieTheming Set to False, theskin isnot applied to thecontrol. CSS settings from the 
theme's CSS file are still applied, though. 


PRACTICAL TIPS ON CREATING CONSISTENT PAGES 

The following list provides some practical tips on creating consistent pages: 

>- W hen you create a new website, always start by adding a master page that you base all other 
pages on. Even if you think you have a site with only a few pages, a master page will help 
you ensure a consistent look across the entire site. Adding a master page at a later stage to 
the site means making a lot of manual changes to existing pages. 

>■ As soon as you find yourself adding styling information to complex controls like the 

TreeView and Menu (discussed in the next chapter) or data-aware controls like the cridview 
(discussed in Chapter 13), consider creating a skin for them. The fact that you can control 
the layout of all similar controls from a single location makes it a lot easier to update your 
site. If you want to override the layout for a few controls, you can always use named skins 
with a SkiniD or disable the skin entirely by setting EnabieTheming to False. 
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>- When creating skins or setting styie properties directiy on a control, consider using tlie 

cssciass property instead, and then moving aii styiing-reiated properties to tlie CSS for tlie 
site or tlieme. Tliis decreases tine page's size and mai<es it easier to mai<e clianges to tlie iayout 
afterward. 

>• Tlie Export Tempiate feature of Visuai Studio is a great time saver. You can use it not oniy to 
create a tempiate for an ASPX page and its Code Beliind, but aiso for otiier fiies iii<e classes 
and CSS fiies, and even a complete website. This enables you to jump-start the creation of 
new files, saving you from typing the same stuff over and over again. 


SUMMARY 

The consistent look and feel of all pages in your site is important to give your site a professional and 
attractive look. This in turn helps your visitors in finding the right information in your site, increas- 
ing the chances that they might visit your site again. ASP.N ET 4.5 offers a number of great tools to 
aid you in creating a consistent looking website. 

ASP.N ET master pages and content pages help you create a layout that is repeated in every page that 
is based on that master. 

W hereas master pages define a centralized look and feel, you use a base page to centralize behavior 
such as checking the page for invalid titles. 

Themes are used to change the look and feel of the pages in your site and the controls they contain. 
Because themes can contain CSS files, images, and skins, you can change colors, fonts, positioning, 
and images simply by applying a theme. By making good use of techniques like named skins and the 
EnabieTheming attribute, you Can Create a design that applies to your entiresite, whileyou main- 
tain the flexibility to overrule the design on a control-by-control basis. 

The Planet Wrox website is now starting to grow. This means it becomes more difficult for you and 
your visitors to find the right pages. The next chapter shows you a number of different ways for your 
users to navigate your site so they won't have any problems finding the page they are looking for. 


EXERCISES 


1. What's the difference between a contentPiaceHoider and a content control? In what type of 
page do you use which one? 

2. How do you hook up a content control in a content page to the contentPiaceHoider in the mas- 
ter page? 

3. Imagine you have created a skin that gets applied to all buttons in your site with the following skin 
definition: 

<asp:Button runat=" server" CssClass="MyButton" /> 
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The imaginary CSS class MyButton sets tlie bacl<ground color of the button to black and the fore- 
ground color to white. To draw attention to a specific button in a page, you decide to give it a red 
background instead. Which options do you have to control the look of this single button? 

4. Explain the differences between setting the Theme property and the styieSheetTheme property 
for a page. 

5. Name three different ways to set the Theme property for a page and explain the differences 
between the options. 

6. What's the main reason for implementing a base page in your website? 
You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 


Base page 

A class inheriting from the ASP.NET Page class that serves as the parent class for 


vour ASPX Daaes 

Content page 

An ASPX Web Form that uses a master page to build up its global appearance 



Cookies 

Little pieces of text that you can store on the user's computer and access again 
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Master page 

A central page that defines the look and feel of content pages that use the master 



Named skin 

An ASP.NET skin with an explicit skiniD set, enabling you to refer to this skin by 


its ID 

Page life cycle 

The series of events that an ASPX page goes through when requested by a 


browser 

Skin 

A collection of presentational settings to influence the appearance of controls in 


the browser 

Theme 

A collection of CSS styles, skins, and images to change the appearance of pages 


in your site 


Navigation 


WHAT YOU WILL LEARN IN THIS CHAPTER: 


>• How to move around in your site using server controls and plain 
HTML 

>• How to address pages and other resources like images 

>• How to use tine ASP.NET Menu, TreeView, and SiteMapPath 
navigation controls 

>" How to send users from one page to another programmatically 
WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 

www.wrox.com/remtitle.cgi?isbn=11183118 0 9. The COde iS ih the C hapter 7 dOWhload. 

W hen your site contains more than a handful of pages, it's important to have a solid and clear 
navigation structure that enables users to find their way around your site. If you implement a 
good navigation system, all the disconnected web pages in your project form a complete and 
coherent website. 

W hen you think about important parts of a navigation system, the first thing that you may 
come up with is a menu. M enus come in all sorts and sizes, ranging from simple and static 
HTM L links to complex, fold-out menus driven by CSS or JavaScript. But there's more to 
navigation than menus alone. ASP.N ET comes with a number of useful navigation controls 
that enableyou to set up a navigation system in no time. These controls include the Menu, 
TreeView, and SiteMapPath, which you learn about in this chapter. 

Besides visual controls likeMenu, navigation isalso about structure. A well-organized siteis 
easy for your users to navigate. The web. sitemap file that is used by the navigation controls 
helps you define the logical structureof your site. 
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Another important part of navigation tal<es place at tlie server. Sending a user from one page to 
anotiier in Code Beiiind based on some condition is a very common scenario. For exampie, imagine 
an administrator entering a new CD or concert review in tiie M anagement section of tlie website. 
W lien tiie review is completed, you may want to show the administrator the full details by redirect- 
ing her to a new page. 

In this chapter, you learn how to use the different navigation options at your disposal. Before you 
lool< at the built-in navigation controls, however, you need to understand the different options you 
have to address the resources in your site, such asASPX pages and images. 


DIFFERENT WAYS TO MOVE AROUND YOUR SITE 

The most common way to let a user move from one page to another is by using the <a> element. 
This element has an href attribute that enables you to define the address of a page or other resource 
you want to linl< to. Between the tags you can place the content you want to linl<, such as text, an 
image, or other HTM L. The following snippet shows a simple example of the <a> element: 

<a href =" Login. aspx">You can log in here</a> 

With thiscodein a web page, after users clicl< thetext "You can log in here," they aretaken to the 
Login, aspx page, which should be in the same folder as the page that contains the linl<. 

The <a> element has a server-side counterpart called thenyperLink. It eventually ends up as an <a> 
element in the page. TheNavigateuri property of this control maps directly to the href attribute 
of the <a> element. For example, a server-side HyperLink in a content page such as this: 

<asp : HyperLink runat="server" id="LoginLink" NavigateUrl="Login . aspx" > 
You can log in here</asp:HyperLink> 

produces thefollowing HTM L in the browser: 

<a id="LoginLink" href ="Login . aspx" >You can log in here</a> 

Other than the ID that is assigned by the ASP.N ET run time, this code is identical to the earlier 
example. In both cases, the href attribute points to the Login, aspx page using a relative UR L. The 
next topic describes the differences between relative and absolute URLs. 

Understanding Absolute and Relative URLs 

Key to working with links in your site is a good understanding of the different forms a uniform 
resource locator (U R L) to a resource inside or outside your website can take. A URL is used to 
uniquely identify a resource in your or another website. These U RLs are used in different places, 
including the href attribute of a hyperlink or a <iink> element to point to a CSS file, the src attri- 
bute pointing to an image or a JavaScript source file, and theuri o value of a CSS property. A U RL 
can be expressed as a relative URL or an absolute URL. Both have advantages and disadvantages 
that you should be aware of. 
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Relative URLs 

In the previous examples you saw a relative URL that points to 
another resource relative to thelocation where theURL isused. This 
means that the page containing the <a> element and the Login, aspx 
page should both be placed in the same folder in your site. To refer 
to resources in other folders you can use the following URLs. All the 
examples are based on a site structure shown in Figure 7-1. 

To linl< from Login, aspx in the root to Default .aspx in the 

Management folder, you Can use this U R L : 

<a href =" Management /Default . aspx" >Management</a> 

To refer to the imageneader . jpg from Default .aspx in the 
Management folder, you Can use this U R L : 

<img src=" .. /Images/Header . jpg" /> 

The two leading periods "navigate" one folder up to the root, and 
then the path goes back in the images folder to point to Header.jpg. 

For a deeper folder hierarchy, you can use multiple double periods, one for each folder you want to 
go upward in the site hierarchy, I il<e the following <img> element. You can use it to refer to the same 
image from pages in the Reviews folder, which is located under theManagement folder; 

<img src=" ../.. /Images/Header . jpg" /> 

0 ne benefit of relative URLs is that you can move a set of files to another directory at the same level 
without breaking their internal links. H owever, at the same time, they make it more difficult to 
movefiles to a different level in the site hierarchy. For example, if you moved the Login, aspx page 
to a separate folder I ike Members, the link to theManagement folder would break. The new Members 
folder doesn't have Management as its subfolder, so Management/Default .aspx is no longer a Valid 
link. 

To overcome this problem, you can use root-based relative URLs. 
Root-Based Relative URLs 

Root-based relative URLs always start with a leading forward slash to indicate the root of the site. If 
you take the link to theManagement folder again, its root-based version looks like this; 

<a href =" /Management /Default . aspx" >Management</a> 

N otethe leading forward slash in front of the Management folder to indicate the root of the website. 
This link is unambiguous. It always points to theDefauit .aspx file in theManagement folder in the 
root. With this link, moving the Login, aspx page to a subfolder doesn't break it; it still points to 
the exact same file. 
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256 I CHAPTER? NAVIGATION 


Relative URLs in Server-Side Controls 

With ASP.N ET Server Controls, you have another option at your disposal to refer to resources in 
your website: You can use the tilde (~) character to point to the current root of the site. This is espe- 
cially useful when you run your website as a separate application folder under the main website. 
This would be the case if your main site ran under www.pianetwrox.com/site rather than under 
www.pianetwrox.com, for example. To seewhatthat means, consider this image that uses the tilde 

in its ImageUri: 

<asp:Image ID="Imagel" runat=" server" ImageUrl=" -/Images/Header . jpg" /> 

W hen you use an application folder such as site, the image is searched for at /site/images/ 
Header.jpg. If you reconfigure the Site to run without an application folder, the image is looked for 
at /Images /Header, jpg without requiring you to change any code. 

You can also use the ~ syntax on regular HTML elements, provided you add the runat attribute. 
This way, the path is processed at the server and then returned to the client. The following example 
shows a plain HTM L link that links to a page in the Management folder: 

<a href = " - /Management /Default . aspx" runat = " server" >Management</a> 

Previous versions of Visual Studio set up the built-in web server as an application folder, making the 
use of the tilde a much needed option. H owever, the new IIS Ex press that now ships with VS 2012 does 
not use an application folder by default. So, when you start up the web server by requesting a page, its 
address will be something likehttp://iocaihost :59898/ and not http://iocaihost :59898/site/. 
If you still see the Site part in the URL, you may be running the older built-in web server instead. If 
that's the case, you can switch to using IIS Express by right-clicking the site in the Solution Explorer and 
then choosing Use I IS Express. The remainder of this book assumes you're using IIS Express and do not 
have an application folder in the URL for your site. 

Absolute URLs 

I n contrast to relative U R Ls that refer to a resource from a document or site root perspective, you 
can also use absolute URLs that refer to a resource by its full path. So instead of directly referring 
to an image and optionally specifying a folder, you include the full name of the domain and proto- 
col information (thehttp: // prefix). H ere's an example that refers to the Wrox logo at the Wrox 
Programmer to Programmer site (http://p2p.wrox.com), where you go for questions about this 
and other Wrox books or for general questions regarding programming: 

<img src="http : //p2p . wrox . com/images/header/wrox_logo . gif " /> 

Absolute URLs are required if you want to refer to a resource outside your own website. With such 
a U RL, the http:// prefix is important. If you leave it out, the browser will look for a folder called 
p2p.wrox.com insideyour own website. 

Absolute URLs are unambiguous. They always refer to a fixed location, which helps you to make 
sure you're always referring to the exact same resource, no matter where the source document is 
located. This may make you think that they are ideal to use everywhere— including references to 
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resources within your own site— but that's not the case. The extra protocol and domain information 
adds to the size of the page in the browser, mai<ing it unnecessarily slower to download. But more 
important, it creates difficulties if you're changing your domain name, or if you want to reuse some 
functionality in a different website. For example, if you previously had your site running on www. 

mydomain.com but you're mOVing it to www.someotherdomain.com, yOU Will need tO Update all the 

absolute URLs in the entire website. 

You will also have trouble with absolute URLs during development. Q uite often, you test your web- 
siteon a URL such ashttp://iocaihost. If you were to point all your images to that URL, they 
would all break as soon as you put your siteon a production domain I il<e www. pianetwrox.com. 

In short, use absolute URLs with caution. You always need them when referring to resources outside 
your website, but you should give preference to relativeURLs within your own projects wherever 
possible. 

Understanding Default Documents 

In the context of U RLs you should also know about default documents. W hen you browse to a site 
I ike www. domainname.com you magical ly See a page appear. How does this work? Each web server 
has so-called default documents, a list of document names that can be served to a browser when no 
explicit document name is supplied. So, when you browse to www.domainname.com, the web server 
scans the directory requested (the root folder in this example) and processes the first filefrom its 
default documents list it finds on disk. In most ASP. N ET scenarios, the web server is set up to use 
Default .aspx as the default document. So, when you browse to www.domainname.com on an ASP. 
N ET web server, you are actually served thepagewww.domainname.com/Defauit.aspx. 

In the links you create, you should generally leave out Default .aspx when it isn't needed. It 
decreases the page size, but more important, it makes it easier for your users to type the address. 

Now that you have seen how you can use URLs to point to documents and other files, it's time to 
look at some higher-level controls that make use of these URLs: the ASP. N ET navigation controls. 


USING THE NAVIGATION CONTROLS 

ASP.N ET 4.5 offers three useful navigation tools: siteMapPath, Treeview, and Menu. Figure 7-2 
shows basic examples of the three navigation controls, without any styling applied. 

The SiteMapPath on the left shows the user the path to the current page. This helps if users want to 
go up one or more levels in the site hierarchy. It also helps them to understand where they are. The 
Treeview Can display the structure of your site and enables you to expand and col lapse the different 
nodes; in Figure 7-2 the entire tree is expanded. The Menu control on the right initially only displays 
the H ome menu item. H owever, as soon as you move the mouse over the menu item, a submenu 
appears. In Figure 7-2 one of these child elements is the Reviews item, which in turn has child ele- 
ments itself. 
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FIGURE 7-2 


Although quite different in behavior and appearance, these three navigation controis have part of 
their design in common. 

Architecture of the Navigation Controls 

To mai<e it easy to show reievant pages in your site using a Menu, a Treeview, or a siteMappath, 
ASP.N ET uses an X M L-based file that describes the logical structure of your website. By default, 
thisfiieiscaiied web. sitemap. Thisfiieisthen used by the navigation controisin your site to pres- 
ent reievant linl<s in an organized way. Simply by hooi<ing up one of the navigation controis to the 
Web. sitemap file, you Can Create complex user interface dements iii<efoid-out menus or a treeview. 

Examining the Web.sitemap File 

By defauit, you shouid caii the site map file web. sitemap. This enabies the controis to find the right 
fileautomaticaiiy. For more advanced scenarios you can have muitiple site map fiies with different 
names, with a configuration setting in the web.config file that exposes these additionai files to the 
system. In most cases, a single site map fiie is sufficient. A basic version of the site map fiiecan looi< 
lil<ethis: 

<?xml version="l . 0" encoding="utf-8" ?> 

<siteMap xmlns="http : / /schemas .microsoft . com/AspNet/SiteMap-File-1 . 0 " > 
<siteMapNode url="~/" title="Home" description="Go to the homepage"> 
<siteMapNode url=" -/Reviews" title="Reviews" 

description="Reviews published on this site" /> 
<siteMapNode url="~/About" title="About" 
description= "About this site" /> 
< / s i t eMapNode > 
</siteMap> 
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The site map file contains siteMapNode dements tliat togetlier form tlie iogicai structure of your 
site. In tliis exampie, tliere is a singie root node caiied H ome, wliicli in turn contains two cliiid de- 
ments, Reviews and About. 

Key Elements of the Web. sitemap File 

Eacli SiteMapNode Can liave many cliiid nodes (but ttiere can only be one siteMapNode directly 
under the siteMap dement), enabling you to createa site structure that can be both wideand 
deep. The SiteMapNode dements in this example have three of thdr attributes set: uri, title, and 
description. Theuri attribute shou Id point to a valid page in your website. You can use the ~ 
syntax you saw in the previous section to refer to application-root- based URLs. TheASP.N ET run 
time doesn't allow you to specify the same URL more than once, but you can worl< around that by 
making the U RL unique by adding a query string. For example, -/Login. aspx and -/Login 
.aspx?type=Admin will be Seen as two different pages. You see more of the query string later in this 
chapter. 

The title attribute is used in the navigation controlsto display thenameof the page. You see more 

about this later when you work with the Menu, TreeVlew, and SiteMapPath controls. The descrip- 
tion attribute is used as a tooltip for the navigation dements. Figure 7-2 shows a tooltip for the By 
Genre item. 

The navigation controls work together with the ASP.N ET security mechanism. That is, you can 
automatically hide dements from controls I ike the Menu that users don't have access to. Security is 
described in more detail in Chapter 16. 

The SiteMapPath control that displays a breadcrumb (discussed later in this chapter) is able 
to find the Web. sitemap file itsdf. For the other two navigation controls, you need to specify a 
siteMapDatasource control (which you Can find under the Data category of the Toolbox) explicitly 
as an intermediate layer to the web. sitemap file. 

To createa web. sitemap file, you need to add one to your site and then manually add the necessary 
SiteMapNode dements to it. There is no automated way in Visual Studio to createa site map file 
based on the current site's structure, although third-party solutions exist that hdp you with this. 


lljUHmg^Q Creating a Web.sitemap File 

In this exercise you add a new web. sitemap file to the site and add a bunch of siteMapNode dements 
to it. Thissitemap serves as the basis for the navigation controlsin the site. 

1. Right-dick the website in the Solution Explorer, chooseAdd > Add N ew Item, and dick Site M ap. 
Leave the default name set to web. sitemap and dick Add. You end up with one root dement con- 
taining two child nodes in the web. sitemap file. 

2. M odify the Web. sitemap SO it Contains this code: 

<?xml version=" 1 . 0" encoding="utf -8" ?> 

<siteMap xmlns="http : // schemas .microsoft . com/AspNet/SiteMap-File-1 . 0 " > 
<siteMapNode url="~/" title="Home" description="Home"> 
<siteMapNode url=" -/Default . aspx" title="Home" 

description="Go to the homepage" /> 
<siteMapNode url="-/Reviews/Def ault . aspx" title="Reviews" 
description= "Reviews published on this site"> 
<siteMapNode url=" -/Reviews /AllByGenre . aspx" title="By Genre" 
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description="All Reviews Grouped by Genre" /> 
<siteMapNode url=" -/Reviews /All . aspx" title="All Reviews" 
description="All Reviews" /> 
< / s i t eMapNode > 

<siteMapNode url=" -/About/Default . aspx" title="About" 
description= "About this Site"> 
<siteMapNode url=" -/About/Contact . aspx" title="Contact Us" 

description="Contact Us" /> 
<siteMapNode url=" -/About/AboutUs . aspx" title= "About Us" 
description= "About Us" /> 
< / s i t eMapNode > 

<siteMapNode url="~/Login . aspx" title="Login" 

description="Log in to this web site" /> 
</siteMapNode> 
</siteMap> 

Remember, you don't have to type all this code yourself. You can find a copy of the file in this 
chapter's code file that you can download from the Wrox website. 

3. Save the file; you're done with it for now. 


COMMON MISTAKES Make sure you type the code exactly as shown here. 
Notice that some items, such as the first Home element, contain other child ele- 
ments and have their closing tag further down in the code. In contrast, items 
such as By Genre are using self-closing tags and do not have any child elements. 


How It Works 

Although you didn't add any spectacular code in the web. sitemap file, a few things are worth discuss- 
ing. First of all, note that the site map only contains a single root node called H ome. This is enforced 
by the Web. sitemap file, which doesn't allow more than one root element. Thedownsideof thisisthat 
this single root element will also be the root item of your Menu and Treeview controls. In Figure 7-2 
you can see how all submenus of the Treeview fall under the Home node. In most websites, however, it's 
much more common to have the Home item at the same level as the others. Therefore, in this exercise 
you added an additional Home node directly under the parent nodeto align it with the Reviews, About, 
and Login items. In a later exercise you see how to hide the root element from the controls, enabling 
you to only show the "first children" of the root node and their children. To overcome the problem that 
U RLs in the siteMapNode elements need to be unique, you set one to -/ and the other to -/Default 
.aspx. Because of the way web servers handle default documents, this eventually points to the 
same file. 


A Web. sitemap file all by itself isn't very useful. You need to add navigation controls to your site to 
make use of the site map. In the next section you see how to use the Menu control. Later sections dig 
into the Treeview and siteMapPath controls. 
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Using the Menu Control 

The Menu control is very easy to use and tweak. To create a basic menu, all you need to do is add 
one to your page, hook it up to a siteMapDatasource control, and you're done. But at the same 
time, the control is quite flexible and has around 80 public properties (including the ones shared by 
all controls) that enableyou to tweak every visual aspect of the control. The following table lists 
the most common properties used with the menu. Refer to the M SDN online help for a complete 
description of this control. 


PROPERTY 

DESCRfPTION 

CssClass 

Enables you to set a CSS class attribute that applies to 
the entire control. 

S tat icEnableDefaultPopOut Image 

A boolean that determines whether images are used to 
indicate submenus on the top-level menu items. 

DynamicEnableDefaultPopOut Image 

A boolean that determines whether images are used to 
indicate submenus on submenu items. 

DisappearAf ter 

Determines the time in milliseconds that menu items 
will remain visible after you move your mouse away 
from them. 

MaximumDynamicDisplayLevels 

Determines the number of levels of submenu items that 
the control can display. Useful with very large site maps 
to limit the number of items being sent to the browser. 

Dat aSouirce ID 

The ID of a SiteMapDataSource control that supplies 
the data for the menu from the web . sitemap file. 

Orientation 

Determines whether to use a horizontal menu with 
drop-out submenus, or a vertical menu with fold-out 
submenus. 

Rende r i ngMode 

Introduced in ASP.NET 4, this property determines 
whether the control presents itself using tables and 
inline styles or unordered lists and CSS styles. 

Includes tyleBlock 

Introduced in ASP.NET 4, this property gives you full 
control (and responsibility) in styling the control. When 
set to False, ASP.NET does not add the embedded 
style sheet block used to lay out the Menu control, 
making you responsible for writing the CSS. 


The Menu control also has a few properties that start with static or Dynamic, two of which were 
shown in the preceding table. The static properties are used to control the main menu items that 
appear when the page loads. Because they don't change or get hidden when you hover over them. 
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they are considered static. Tlie submenus are dynamic, because tliey appear only wlien you activate 
tile relevant main menu items. 

In addition to these properties, the Menu control also has a number of style properties that enable 
you to change the lool< and feel of the different parts of the menu. 

Using the Rendering Mode 

Earlier versions of the Menu control were criticized because of the H TM L they generated. In ASP 
.NET 2.0 and 3.5, the Menu control generated bloated HTM L using tables and inline styles. Besides 
increasing the size of the page unnecessarily, this also meant that the Menu was much harder to 
style using your own CSS. Fortunately, this was fixed in ASP.N ET 4 with the introduction of the 
RenderingMode property on the control. By default in new ASP.N ET 4 and 4.5 sites, this property 
ensures the control renders itself as an unordered list using <ui> and <ii> elements. You can over- 
ride this behavior by setting the RenderingMode property to Table instead. 

You seetheMenu control and the H TM L it generates in the next exercise. 

Creating a Basic Version of tlie IVIenu Control 

To see how the Menu control operates, you're best off creating a very basic version first. 0 nee you 
understand how it worl<s and how it operates under the hood, you can style the menu to your lil<ing 
so it blends in with the design of the rest of your site. 


TRY IT OUT 


Adding a IVIenu to the Site 


In this exercise, you see how to add a Menu control to the master page that uses the web. sitemap file to 
build up the menu. The Menu is added to the <nav> element in the master page and presents the menu 
items horizontally. Because of this orientation, this Menu is suitable only for the M onochrome theme. 
Later you add a Treeview to represent the pages in the site, and write some code that shows the Menu 
for the M onochrome theme and the Treeview for the D arl<G rey theme. 

1. Open the master page in M arl<up View and locate the <nav> element. Remove the placeholder text 

Menu Goes Here. 

2. From the N avigation category of the Toolbox, drag a Menu and drop it between the <nav> tags. Set 

the CssClass of the Menu COntrol to MainMenu: 
<nav> 

<asp:Menu ID="Menul" runat= " server " CssClass="MainMenu"></asp:Menu> 

</nav> 

3. Switch to Design View. You may notice that the Design View doesn't look lil<e the final page any- 
more. That's because you may have removed the styiesheetTheme attribute from the <pages> 
element in web.config. You can leave it lil<e this for now. With much of the styling already done, 
this isn't so important. You can still see how the content inside the cpMaincontent placeholder is 
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going to end up in tlie browser. If your Design View does iooi< mucli closer to the final page, open 
the Web. config file and remove the styiesheetTheme attribute from the<pages> element. 

4. Clicl< the Menu control's gray arrow to open its Smart Tasks panel. 

5. From the Choose Data Source drop-down list select <N ew data source>. In the dialog box that 
appears, clicl< the Site M ap icon. Figure 7-3 shows the Data Source Configuration Wizard. 


Choose a Data Source Type 


Where will the application get data from? 



Connect to the site mwgation tree for this application (requires a valid sitemap file at the application root). 


Specify an ID forthe data source: 


SiteMapDataSourcel 


FIGURE 7-3 
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Cancel 


Frontend. master* -o X 


isp:MenuJMen ul_| 


Home ► 


w 


SiteMapDataSource - SiteMapDataSourcel 


6. Clicl< OK to close the dialog box. 

7. W hen you return to the page, the Menu control now 
shows the top-level element, H ome (see Figure 7-4). 

8. Clicl< the siteMapDatasource control once and 
then press F4 to open or activate the Properties 
Grid. Change the showstartingNode property from 
True to False. N ote that as soon as you do this, the 
Menu control in the designer is updated and shows 

all direct child menus under the root element: H ome. Reviews, About, and Login. Figure 7-5 shows 
how your Menu control should look now. 


Select a Theme 
I Monochrome ▼I 
Footer Goes Here 


FIGURE 7-4 
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FIGURE 7-5 


9. Click the Menu control once to select it and then make the following changes to the properties of 
the control using the Properties Grid. Because the Menu control has so many properties, you may 
find it easier to find them if you sort the list of properties alphabetically in the Properties Grid. You 
can do that by clicking the second button on the toolbar with an A, a Z, and an arrow on it. 



S t at icEnableDefaultPopOut Image False 


Orientation Horizontal 


W hen you're ready, the code for your Menu should look like this: 

<asp:Menu ID="Menul" runat=" server" CssClass="MainMenu" Orientation="Horizontal" 

DataSourceID="SiteMapDataSourcel" StaticEnableDefaultPopOutImage= "False "> 
</asp:Menu> 

10. Save the changes to the master page and then request Default, aspx in your browser. If neces- 
sary, use the Theme drop-down list to make M onochrome the active theme. You should now see 
the menu in the horizontal menu area. H over your mouse over the items, and you'll see sub items 
appear as in Figure 7-6, which shows the page in Google's Chrome browser. 


W □ Welcome to Planet Wrox 

I *- - C D localhost:49194 



[All Reviews Grouped by Genre \ 

Hi there visitor and welcome to Planet Wrox 


localhost:491M/Reviea.';,'AIIEly 


LLi,'i'?, the coolest music comivunity site on the Internet. 



FIGURE 7-6 


Using the Navigation Controls | 265 


N otethat the text on the sub items is hard to read. That's because the CSS from the M onochrome 
theme has changed the text of all anchors in the menu area to whiteand no explicit background 
color has been set. After you've seen how the Menu control worl<s, you get a chance to fix its 
styling. 

Don't worry if the menu doesn't look good in the DarkGrey theme. You see how to implement a 
different navigation control for that theme later in this chapter. 

How It Works 

W hen a page with the menu is sent to the browser, the Menu control asks the siteMapDatasource, 
defined in the same master page, for data. Thisdata source control in turn reads the web. sitemap file 
and then hands over the data to the Menu control. Based on the hierarchical XML, the Menu is able to 
generate the necessary HTML and JavaScript. Itgeneratesa <ui> element forthetop menu itemswith 
nested subelements, each containing one or more menu items. The Menu control initially hides the sub- 
menus. When you hover your mouseover one of the main menu items, the submenu becomes visible. 
This is done by some JavaScript. 

If you search the source of the page for the JavaScript code that hides or shows the menu, you won't 
find it. So where is theJavaScript that is used to show and hide the relevant menu items? The answer is 
in the cryptic <script> tag in the page that looks similar to this: 

< script src="/WebResource . axd?d=vxurWY7j jhneEhwNQbmdBEdPSXwLRyt jgBhME91yLool 
&amp;t=633 9252 061433 5552 0" type="text/javascript"> 

This <script> tag references a special ASP.N ET handler called webResource.axd. The seemingly 
random characters in the query string (the part of the URL after the question mark) tell the ASP.N ET 
run timeto fetch a JavaScript filethat contains thefunctionality for the menu. The file doesn't exist 
on your disk, but is returned by the webResource.axd handler on the fly based on the query string. 
If you're brave, you can look at the file by requesting it in your browser by copying the value of the 
src attribute and pasting it right after the port number of your website in the browser (for example, 
http://iocaihost: 50404). You Can Safely ignorethefile, because you don't need to makeany changes 
to it for the menu to function correctly. The webResource.axd syntax is also used by other controls, 
I ike the Treeview that uses it to retrieve the images used in theTreeview. 

In addition to theJavaScript, you also find a CSS <styie> block at the top of your page, which sets 
the default layout for your menu items. Among other things, it removes the default bullet that <ui> ele- 
ments display and removes underlining from the <a> elements in the menus. 


To better integrate the Menu control with the existing design of the M onochrome theme, you can 
style it using CSS. 

Styling the Menu Control 

The Menu control exposes a number of complex style properties that enable you to change the look 
of items such as the main and submenu items. You can also define how these items look when they 
are active (selected) or when you hover your mouse over them. Each of these style properties has a 
number of subproperties for visual aspects, such as font, color, and spacing. Figure 7-7 shows the 
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Properties Grid for tlie staticMenuitemstyie property, wliicli defines tlie looi< of tlie main menu 
items tliat arevisibie wlien tlie page first ioads. 


Menul System. Web.UI.WebControls.Menu 

Level SubM en u Styles (Collection) 
m Static HoverStyle 
E Static Menu Item Style 

BackColor 

BorderColor 

BorderStyle NotSet 
BorderWidth 
CssClass 
El Font 
ForeColor 
Height 

HorizontalPadding 
ItemSpacing 
VerticalPadding 
Width 
Static MenultemStyie 

The style of menu items that are in the static part of the menu. 


FIGURE 7-7 


M ost of tlie properties, iii<eBackcoior, Forecoior, and Font, are added to tlie<styie> bioci< at 
tlietop of tlie pagetliat contains tlie Menu controi. Tliis mai<es it difficuit to reuse tlie design in otiier 
pages or witli otiier tliemes, so it's mucli better to use CSS instead. You see liow tliis worl<s next. 


TRY IT OUT 


Styling the Menu Control 


In tliis exercise you add some CSS rules to the Monochrome, ess file to influence the way the Menu 
control is styled. By default, the Menu control adds CSS classes to the menu items, such as leveii and 
ievei2, which mal<es it easy to apply styling at various levels in the menu. 

1. Open Monochrome. CSS from the Monochrome theme folder and add the following CSS rules. You 
can leave out the comments placed between /* and */, because they only serve to describe the 
purpose of the selectors. If you don't feel lil<e typing all this CSS, remember you can also get a 
copy of this file from the code download that comes with this bool< and copy it from that file into 
yours. You can find the Monochrome, ess file in the Monochrome theme folder for this chapter. 
Remember, CSS is case sensitive, so type the selectors exactly as shown here; 

ul . levell 
{ 

/* Defines the appearance of main menu items. */ 
font -size: 14px; 
font-weight: bold; 
height: 19px; 
line-height: 19px; 
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ul.levell .selected 

/* Defines the appearance of active menu items. */ 
background-color: #509EE7; 


. levell 

/* Adds some white space to the left of the main menu item text. 

! important is used to overrule the in-line CSS that the menu generates */ 
padding-lef t : 5px ! important; 


. Ievel2 

/* Defines the appearance of the sub menu items. */ 
background-color: #555555; 
padding-left: 8px; 


a . levell : hover , a . Ievel2 : hover 

/* Defines the hover style for the main and sub items. */ 
background-color: #509EE7; 

2. Save and close the file. 

3. N ext, create the following folders and Web Forms that you'll use in this and later chapters. Use the 
M yBasePage template to create the new files. Also, in M arkup View, give each pagea meaningful 
title to avoid errors later. 


FOLDER 

FILENAME 

TITLE 

/About 

Default . aspx 

About this Site 

/About 

Contact . aspx 

Contact Us 

/About 

AboutUs . aspx 

About Us 

/Reviews 

Default . aspx 

My Favorite Reviews 

/Reviews 

All . aspx 

All Reviews 

/Reviews 

AllByGenre . aspx 

Reviews Grouped by Genre 


4. Save all changes and open the Default .aspx page from the root in your browser. Your site menu 
now lool<s a lot better and more in line with the rest of the M onochrome theme. W hen you hover 
the mouse over a main menu, the submenus appear, showing the text on a light gray bacl<ground. 
W hen you hover over a submenu, its bacl<ground color changes again. Figure 7-8 shows the 
expanded Reviews menu with the hover style applied to the By Genre menu item in Opera. 
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FIGURE 7-8 


COMMON MISTAKES If you get an error when you navigate to one of the new 

pages you created, make sure you gave all of them a valid title. Because they all 
inherit from the base page, the title is checked when the page loads. If the menu 
hasn't been updated, press Ctrl+F5 to get a fresh copy of the style sheet from 
the server. 


How It Works 

T he Menu control renders itself as a series of <ui> and <ii> elements. T he menu items themselves are 
simple <a> elements with a class attribute to indicate at what level they are. If you look in the H TM L 
for the page in the browser you see something lil<ethis: 

<ul class="levell"> 

<li><a title="Go to the homepage" class="levell" 

href =" /Default . aspx" >Home</a></li> 
<li><a title= "Reviews published on this site" 

class=" level 1" href = " /Reviews/Default . aspx" >Reviews</a> 
<ul class=" level2 " > 

<li><a title="All Reviews Grouped by Genre" 

class= "level2 " href =" /Reviews /AllByGenre . aspx" >By Genre</a></li> 
<li><a title="All Reviews" 

class="level2" href =" /Reviews/All . aspx" >A11 Reviews</a> 
</li> 
</ul> 
</li> 

... <!-- Other menu items go here --> 
</ul> 

Because this code is pure H TM L with a few class attributes applied, it's easy to style this information 
using the CSS techniques you learned in earlier chapters. The code you added in step 1 uses a number 
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of selectors to style Individual elements of the menu. For example, the main menu Items are styled as 
follows: 

ul . levell 
{ 

font-size: 14px; 
font-weight: bold; 
height: 19px; 
line-height: 19px; 

} 

This code Is applied to all <ui> elements with a CSS class of leveii, which means It's applied to 
all main menu Items such as H ome, Reviews, and About. Take a look at the first <a> element In the 
H TM L of the menu, which represents the selected H ome Item. N otice how It has a second class called 
selected applied: 

<a title="Go to the homepage" class="levell selected" 

href = " /Site /Default . aspx" >Home</a> 

Selected Items are then given a different color using this CSS selector: 

ul. levell .selected 
{ 

background- color : #BCD1FE; 

} 

The same principle Is used for the other selectors. Including the pseudo : hover selector that applies to 
<a> elements when you hover your mouse over them: 

a . levell :hover, a . Ievel2 : hover 
{ 

background- color : #BCD1FE; 

} 

To override some of the C SS that the Menu control adds to the top of the page, the C SS rule for the 
static menu Items looks like this: 

a . levell 
{ 

padding-lef t : 5px ! important; 

} 

The Inclusion of important marks this property as more Important than the Inline style targeting the 
same menu Item. Without [important, your menu Item has only a tiny bit of padding on the left. 


The Menu control In horizontal modelsldeal fortheM onochrome theme, because It features a hori- 
zontal navigation bar. For the DarkG rey theme you can use the same Menu and set Its orientation 
to Vertical. ThIs Creates a vertical menu with the main Items stacked on top of each other, whereas 
the submenus will fold out to the right of the main menus. But Instead of the Menu control, you can 
also use a Treeview cohtrol to display a hierarchical overview of the site map. This control Is dis- 
cussed next. 
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Using the TreeView Control 

A TreeView is capable of displaying a hierarchical list of items, similar to how the tree in Windows 
Explorer looks. Items can be expanded and collapsed with the small plus and minus icons in front of 
items that contain child elements. This mal<es theTreeview an ideal tool to display the site map 
of the website as a means to navigate the site. The data used by thexreeview control isnot limited 
to the Web. sitemap file, however. You can also bind it to regular XML files and even create a 
TreeView or its items (called nodes) programmatically. 

The following table lists the most common properties of thexreeview. Again, the M SDN online 
help is a good place to get a detailed overview of all the available properties and their descriptions. 


PROPERTY 

DESCRIPTION 

CssClass 

Enables you to set a CSS class attribute that 
applies to the entire control. 

Coll apse ImageUrl 

The image that collapses a part of the tree when 
clicked. The default is an icon with a minus symbol 
on it. 

ExpandlmageUrl 

The image that expands a part of the tree when 
clicl<ed. The default is an icon with a plus symbol 
on it. 

Col lapse ImageTool Tip 

1 ne looiiip inai is snown wnsn a user novers over 
a collapsible menu item. 

ExpandlmageToolTip 

The tooltip that is shown when a user hovers over 
an expandable menu item. 

ShowExpandCol lapse 

Determines whether the items in the TreeView 
can be collapsed and expanded by clicking an 
image in front of them. 

ShowLines 

Determines whether lines are used to connect the 
individual items in the tree. 

ExpandDepth 

Determines the level at which items in the tree are 
expanded when the page first loads. The default 
setting is FullyExpand, which means all items 
in the tree are visible. Other allowed settings are 
numeric values to indicate the level to which to 
expand. 


TheTreeview control has a number of style properties that enableyou to change the lool< and 
feel of the different parts of the tree. To tell theTreeview which items to show, you bind it to a 
siteMapDatasource control, which is demonstrated next. 
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TRY IT OUT 


Building a Navigation System with the TreeView Control 


In this exercise, you add a Treeview control to the <nav> element, right below the Menu you created 
earlier, and then bind the Treeview to the same data source as the Menu. N ext, you write some code 
that shows either the Menu or the Treeview, depending on the active theme. 

1. Open the master page in M arl<up View and just below the Menu control, add a Treeview control 
by dragging it from the Toolbox. 

2. Within the opening and closing tags of the control, add the following <Leveistyies> element: 

<LevelStyles> 

<asp : TreeNodeStyle CssClass="FirstLevelMenuItems" /> 
< /Levels tyles> 

The FirstLeveiMenuitems class Selector is defined in the file Darkcrey. ess that you added in 
the preceding chapter and is used to create some room above each tree item at the first level. 

3. Switch to Design View, clicl< the Treeview once, and clicl< the small arrow to open the Smart 
Tasks panel. From the Choose Data Source drop-down, select siteMapDatasourcei, the data 
source control you created for the Menu control (see Figure 7-9). 


Frontend. master* -0 X 


Home 
3 Reviews 

By Genre 
All Reviews 
S About 

Contact Us 
About Us 
Login 


TreeView Tasks 

Auto Furm.-3t,,, 


Choose Data Source; 

1 SiteMapDataSourcel [y 

Refresh Schema 

(None) 

EditTreeNode Databi 

<Newdata source,.. > *^ 

Q Show Lines 



SiteMapDataSource - SiteMapDataSourcel 


g Design "| ts Split [ " Source | <nav>|[<asp:TreeVie>AytfrreeView1 >| <LevelStyles> 


0 


FIGURE 7-9 


As soon as you select the data source, the Treeview is updated in Design View; it now shows the 
correct menu items from the site map file. 

4. 0 pen the Properties G rid for the Treeview control and set the showExpandcoiiapse property to 

False. 

5. Clicl< somewhere in the document to put the focus on it, and then press F7 to open the Code 
Behind of the master page file and locate the page_Load event that you used earlier to preselect the 
theme in the Theme list. Right below that code, and before the end of the method, add the follow- 
ing bold code that shows or hides the TreeView and Menu controls based on the currently active 
theme: 
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VB.NET 

item. Selected = True 
End If 
End If 
End If 

Select Case Page . Theme . ToLower ( ) 
Case "darkgrey" 

Menul .Visible = False 
TreeViewl .Visible = True 
Case Else 

Menul .Visible = True 
TreeViewl .Visible = False 
End Select 
End Sub 

C# 

item. Selected = true; 

} 

} 

} 

swi tch (Page . Theme . ToLower ( ) ) 
{ 

case "darkgrey": 

Menul .Visible = false; 

TreeViewl .Visible = true; 

break; 
default : 

Menul .Visible = true; 

TreeViewl .Visible = false; 

break; 

} 

} 

6. Save all changes and open Default .aspx in the browser. Depending on your currently active 
theme, you should see either the Menu or thexreeview control. Select a different theme from the 
list and the page will reload, now showing the other control as the navigation system of the website 
(see Figure 7-10). 


COMMON MISTAKES If you get an error from the code in the BasePage class 
that checks the title, make sure you set a valid theme in the <pages> element in 
the Web. conf ig file. If the theme seems to switch when you move from one page 
to another, make sure your pages inherit BasePage, which should be the case If 
you based the new pages on your custom template. 
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How It Works 

Just like the Menu control, the Treeview control can get its data from a siteMapDatasource control, 
which in turn gets its information from the web. sitemap file. By default, the Treeview shows plus 
and minus signs to indicate that items can be collapsed and expanded. For a site menu this may not 
mal<e much sense, so by setting showExpandcoiiapse to False, you effectively hide the images. The 
Treeview enables you to set a number of style properties, including theNodestyie, RootNodestyie, 
and Leveistyies that influence the appearance of individual items in the tree. In this exercise, you 
used Leveistyies to apply a class called FirstLeveiMenuitems that adds some room above each item 
at the top level, such as H omeand Reviews. 

The code in the Code Behind of the master page looks at the current theme by investigating the Theme 
property of the page. W hen Darkcrey is the current theme, the code hides the Menu and then dis- 
plays the Treeview. In the Case Else/ default block the reverse is true. This means that for the 
M onochrome theme and all future themes you may add, the Treeview is hidden and the Menu is used 
instead as the navigation system. 

The Treeview still suffers from the same problems as the Menu control in previous versions of ASP.N ET 
in that it generates a lot of bloated HTM L. Unfortunately, this control has no RenderingMode prop- 
erty, so if you're using the Treeview you're stuck with the table-based HTML. 
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With two of the three navigation controls discussed, the final control you need to lool< at is the 

SiteMapPath COntrol. 

Using the SiteMapPath Control 

The SiteMapPath control shows you where you are in the site's structure. It presents itself as a series 
of linl<s, often referred to as a breadcrumb. It's a pretty simpleyet powerful control with more than 
50 public properties you can set through the Properties Grid to influence the way it looks. Just lil<e 
the Menu and Treeview, it has a number of style properties you use to change the look of elements 
likethe current node, a normal node, and the path separator. 

The following table lists a few of the most common properties of the siteMapPath control. 


PROPERTY 

DESCRIPTION 

PathDirection 

Supports two values: RootToCurrent and CurrentToRoot. 
The first setting shows the root element on the left, inter- 
mediate levels in the middle, and the current page at the 
right of the path. The CurrentToRoot setting is the exact 
opposite, where the current page is shown at the left of the 
breadcrumb path. 

PathSeparator 

Defines the symbol or text to show between the different 
elements of the path. The default is the "greater than" 
symbol {>), but you can change it to something like the pipe 
character (1). 

RenderCurrentNodeAsLink 

Determines whether the last element of the path {the current 
page) is rendered as a text link or as plaintext. The default is 
False, which is usually fine because you are already on the 
page that element is representing, so there's no real need 
for a link. 


ShowToolTips Determines whether the control displays tooltips (retrieved 

from the description attribute of the siteMapNode elements 
in the Web . sitemap file) when the user hovers over the 
elements in the path. The default is True, which means the 
tooltips are shown by default. 


Depending on your personal preferences, you usually don't need to define any of the styles of the 
SiteMapPath control. In the final page in the browser, the siteMapPath consists of mainly anchor 
tags (<a>) and plaintext. If you have set up a specific selector for anchors in your CSS file, the 
SiteMapPath automatically shows itself in line with the other links in the page. 

^^^^^^Q Creating a Breadcrumb with the SiteMapPath Control | 

A good location for the siteMappath is in the global master page of the site. That way it becomes vis- 
ible in all your pages automatically. 
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1. 0 pen the master page in M arkup View and iocate tlie MainContent <section> eiement. Riglit 
after its opening tag, and before tlie <asp:ContentpiaceHoider> tag, press Enter to create some 
room and drag a siteMapPath from tlieTooibox. Riglit after tlie siteMapPath add two iine 
breai<s (<br />). You sliouid end up witli code lil<etliis: 

<section id= "MainContent " > 

<asp: SiteMapPath ID="SiteMapPathl" runat=" server" ></asp:SiteMapPath><br /xbr /> 

<asp : ContentPlaceHolder ID="cpMainContent" runat=" server "> 

2. Save tlie clianges and tlien request Default, aspx in tine browser. N ote tliat tine page now sliows 
tlie patli from tlie root of the site (identified by tlie H ometext) to tlie current page. Clicl< a few of 
tlie items in tlie Menu or Treeview control to navigate around tlie site and you'll see the bread- 
crumb change for each page. Figure 7-11 shows the breadcrumb for the All Reviews page in 
Firefox. The All Reviews page is a subelement of Reviews, which in turn falls under the H ome root 
element. 



Home Reviews About Login 


Home > Reviews > All Reviews 


FIGURE 7-11 

When you navigate to oneof thesubpages, you can clicl< the elements of the path to go up one 
or more levels. Clicl<ing Reviews in the page shown in Figure 7-11 tal<es you back to the main 
Reviews page, and clicking H ome takes you back to the root of the site. 

3. Using theTheme selector, switch to the other theme. N ote that the siteMapPath looks pretty 
much the same, except for the color of the links, which are defined in the CSS file of each theme. 

How It Works 

The SiteMapPath renders as a series of <span> elements that contain either a link or plaintext. H ere's a 
part of the H TM L code for the siteMapPath from Figure 7-11: 

<span><a title="Home" href ="/">Home</a></span> 
<span> Sigt; </span> 

<span><a title="Reviews published on this site" 

href = "/Reviews /Default . aspx" >Reviews</a></span> 
<span> Sigt; </span> 
<span>All Reviews</span> 

The first two menu items (H ome and Reviews) are represented by a link (<a>) to enable you to navigate 
to the pages defined in their href properties. The final menu item— All Reviews— is just plaintext. 


Select a Theme 
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In between the elements you see a <span> with the character you set in the pathseparator property. 
Because this separator character (>) has a special meaning in H TM L, its value is encoded to &gt; 
(greater than) to ensure it ends up as a plaintext character in the browser. 

If you look at the H TM L for the page in your browser, you also see an <a> element that enables you to 
skip links. The <a> contains a small image with its left property set to a large negative value, so it is 
outside of the visible browser window and you don't see it. This is useful for vision-impaired users with 
screen readers because it enables them to skip the navigation and go directly to the content of the page. 
The Treeview and Menu controls use an identical approach to prevent a screen reader from reading the 
entire site structure out loud every time the page loads. 


The three navigation controls give you a great feature set for a navigation system in your website 
from the client side. Both the Menu and the Treeview controls enable you to quickly display the 
entire structure of the site so users can easily find their way. siteMappath helps users understand 
where they are in the site and gives them an easy way to navigate to pages higher up in the site 
hierarchy. 

In addition to navigating from the client browser, it's also very common to navigate a user to a dif- 
ferent page from the server side using code. H ow this works is discussed in the next section. 


PROGRAMMATIC REDIRECTION 

Programmatic redirection is very useful and common in ASP.N ET pages. For example, imagine a 
page that enables a user to enter a review into the database. As soon as the user clicks the Save but- 
ton, the review is saved and the user is taken to another page where she can see the entire review. 

ASP.N ET supports three major ways to redirect users to a new page programmatically. The first 

two. Response. Redirect and Response . RedirectPermanent (which WaS introduced in 

ASP.N ET 4), send an instruction to the browser to fetch a new page. The third option, server 
.Transfer, executes at the Server. Because there's quite a difference in client- and server-side redi- 
rection, the following sections describe them in more detail. 

Programmatically Redirecting the Client to a Different Page 

Within each ASPX page you have access to a property called Response, which you saw earlier when 
saving the cookie for the selected theme. The Response object gives you access to useful properties 
and methods that are all related to the response from the server to the user's browser. Two of these 
methods are the Redirect and RedirectPermanent methods. T hese methods Send an instruction to 
the browser to request a new page. This is useful if you want to redirect your user to another page in 
your site or to a completely different website. 

The difference between Redirect and RedirectPermanent mainly has to do with search engine 
optimization. Using Redirect tells the client that the page has moved temporarily. You often use 
this to redirect a user to a new page based on some action. For example, after filling in a contact 
form, you may want to send the user to ThankYou.aspx that displays a message. 


Programmatic Redirection | 277 


RedirectPermanent tdls the Client the page has moved permanently. This Is useful If you want to 
tell a search engine to stop looking at an old page, and Index the new one Instead. For example, 
Imagine your site has a page called index, aspx that you no longer use. Search engines may keep 
requesting this page. If you add the following code to the Code Behind of index, aspx, clients 
(Including search engines) are sent to Default. aspx. M oreover, search englneskeep note of the per- 
manency of the redirect and will stop requesting index. aspx and focus on Default .aspx Instead. 

VB.NET 

Protected Sub Page_Load{ sender As Object, e As EventArgs) Handles Me . Load 

Response . RedirectPermanent ( "Default . aspx" ) 
End Sub 

C# 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

Response . RedirectPermanent ( "Default . aspx" ) ; 

} 

The two methods each have a second version (called an overload) that accepts an additional boolean 
parameter called endResponse, which enables you to execute any remaining code after the redirect 
action when you pass False (false In C#) for that parameter. This Is usually not necessary, so 
you're better off calling the first version, which ends the response by default. 

Q ulte often, when you want to send the user to a different page, you want to send some additional 
Information. You can do that by passing It In the query string, the part of the address that comes 
after the page name, separated by a question mark. Consider the following URL: 

http : //localhost : 4 924 6 /Demos /Target . aspx?CategoryId=10&From=Home 

The entire bold part (after the question mark) Is considered the query string. It consists of name- 
value pairs, each separated from another by an ampersand (&). In this case, you have two pairs: 

Categoryld With a Value Of 10 and From with a value of the word Home. The page. Target .aspx In 

this example. Is able to read these values using Request .Querystring. You see how to use the query 
string In the next exercise. 


TRY IT OUT 


Redirecting the User to Anotlier Page 


To give you a closer look at how It works, this exercise shows you how to createa page that redirects 
from one page to another using Response. Redirect. The example uses a temporary redirect (the Initial 
page remains accessible after the redirect), so the code uses Response. Redirect Instead of Response 

. RedirectPermanent. 

1. In the Demos folder, create two new Web Forms based on your custom M yBasePage template. Call 
them Source . aspx and Target . aspx. Set their Title to Source and Target, respectively. 

2. Open Source. aspx In Design VIew and double-click somewhere In the gray, read-only area of the 
page outside the contentpiaceHoider to Set up a page_Load handler. Inside this handler, write 
the following code that redirects the user to the Target, aspx page. To show you how to pass 
additional data through the query string and how to read that Information In the target page, the 
code passes a query string field called Test with somevaiue as the value: 
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VB.NET 

Protected Sub Page_Load (sender As Object, e As EventArgs) Handles Me. Load 
Response . Redirect ( "Target . aspx?Test=Some Value" ) 

End Sub 

C# 

protected void Page_Load (object sender, EventArgs e) 
{ 

Response . Redirect ( "Target . aspx?Test=SomeValue" ) ; 

} 

3. Open Target. aspx, SWitch tO Design View, and add a Label control to tlie cpMainContent 

Content control. Leave its id set to Labeii. Set up a page_Load liandler similar to the one you 
created in the previous step by double-clicking the gray, read-only area of the page, and then add 
the following code; 

VB.NET 

Protected Sub Page_Load (sender As Object, e As EventArgs) Handles Me. Load 
Labell.Text = Request. QueryString.ToStringO 

End Sub 

C# 

protected void Page_Load (object sender, EventArgs e) 
{ 

Labell.Text = Request. QueryString. ToStringO ; 

} 

4. Save all your changes, go back to Source . aspx, and press Ctrl-ff 5 to open it in the browser. 
Instead of seeing source. aspx, you now seethe page depicted in Figure 7-12. 



FIGURE 7-12 


Note that the address bar now reads Target. aspx?Test=some value, the page you redirected 
to in the page_Load event handler of the source page. The Label in the target page showsthe 
query string that is passed to this page. N otice that Querystring.Tostring o contains only 
Test=somevaiue. Theaddress and the question mark are not a part of the query string for the 
page. 
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How It Works 

W hen you use Response. Redirect, ASP.N ET sends an instruction to tlie browser to teii it to fetcli 
a new page. In teclinicai terms, it sends a "302" H TTP status code to indicate tlie page lias moved 
temporariiy. Witli tliis instruction it also sendsthenew URL, so the browser understands what page 
to fetch next. In this exercise, the new page was Target. aspx?Test=somevaiue, which contains 
both the page name and a query string. The Target .aspx page is then requested by the browser, the 
Page_Load event fires, and the query string is displayed on the label in the page. Because of this client 
redirect, the new page name and query string are fully exposed to the client. If you use Response 
.RedirectPermanent, ASP.N ET sends out a "301 M oved Permanently" instruction. For some browsers, 
this means that if the original page has previously been cached by the browser, you're taken automati- 
cally to the new page if you request the original page. 0 nee the browser cache is cleared, a request is 
made again for the original page. Other browsers may continue to request the original page. Search 
engines interpret the 301 redirect as "don't bother fetching this page again" and the page will no longer 
be indexed. 

Redirects follow the same naming scheme for URLs as those used in server controls, so you can redirect 
to a page lil<e -/Default .aspx to redirect the user to the file Default .aspx in the website's root. 


In contrast to Response. Redirect and Response . RedirectPermanent, there isalSO Server 

.Transfer, which redirects to another page at the server. 

Server-Side Redirects 

Server-side redirects are great if you want to send out a different page without modifying the client's 
address bar. This enables you to hide details of page names and query strings, which may lead to 
cleaner U RLs from a user's point of view. This is often used in so-called UR L-rewrite scenarios that 
are used to create pretty URLs. For example, a user may request a page lil<e this: 

http : / /www. domain. com/Cars/Volvo/ 85 0/T5/ 

U nder the hood the server might transfer to: 

http: //www. domain. com/Cars/ShowCar . aspx?Make=S43&;Model = 984S:Type=7345 

Clearly, the first URL isa lot easier to understand and typein a browser. It also enablesa user to 
guess other URLs that match the same pattern. For example, there's a fair chance you can request a 
page lil<ethis: 

http : / /www. domain. com/Cars /Volvo/V7 0/R/ 

and end up with the right page showing you the Volvo V70 R. 

In addition to being easier to understand, server-side transfers may also speed up your sitea little. 
Instead of sending a response to the browser to tell it to fetch a new page, which results in a new 
request for a page, you can transfer the user directly to a new page, saving you some networl< 
overhead. 

Server-side transfers are carried out with the server object. Just as the Request and Response 
objects you saw earlier give you information about the request and the response, so does the server 
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object provideyou with information about tlie server tlie page is running on. You can use it to get 
information about tlie server name, its I P address, and so on. 0 ne of its metliods is Transfer, wliicli 
performs a server-side transfer. 

You can use server .Transfer oniy to redirect to otiier pages witliin your site. You cannot use it to 
send tlie user to pages on different domains. If you try to do so, tlie ASP. N ET run time tlirows an 
error. 

To see tlie difference between Response. Redirect and server .Transfer, tlie fol low i ng exercise 
sliowsyou liow to cliange tlie page source, aspx to perform a server .Transfer operation. 

^^^^^^Q Server-Side Redirecting 

It's easy to cliangetlie redirect code so it transfers tlie user to anotlier page. Aii you need to do is 
replace Response. Redirect With Server . Transfer as demonstrated in this exercise. 

1. Open the Code Behind of source, aspx and replace the line with Response. Redirect with the 
following line: 

VB.NET 

Protected Sub Page_Load (sender As Object, e As EventArgs) Handles Me. Load 

Server . Transfer ( "Target . aspx?Test=SomeValue" ) 
End Sub 

C# 

protected void Page_Load (object sender, EventArgs e) 
{ 

Server . Transfer ( "Target . aspx?Test=SomeValue" ) ; 

} 

2. Save the changes and then pressCtrl4f 5 to open source, aspx in the browser (see Figure 7-13). 



FIGURE 7-13 


The Label control displays the query string values that were sent from source, aspx to Target 
.aspx, demonstrating the fact that you are really viewing the output of the Target .aspx page. 
H owever, the browser's address bar is left unmodified and still shows source. aspx, hiding the 
new page name and query string values from the user. 
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How It Works 

Instead of instructing tlie browser to fetcli a new page, server. Transfer tai<es piacecompieteiy at tlie 
server. Tlie output of tlieoid page is discarded and a new page life cycle is started for the page that is 
being transferred to. This page then generates its content and sends it bacl< to the browser, while leaving 
the browser's address bar unmodified. 

If you look at the emitted HTM L in the browser, you see that the form action issetto the new page 
so any postback that occurs is executed against that page, which in turn changes the address in the 
address bar: 

<form method="post" action= "Target. aspx?Test=SomeValue" id="forml"> 
< / f orm> 


NOTE ASP.NET supports a concept called routing that enables you to freely 
define your own URL structure and link that to pages in your site. For example, 
you could use routing to Implement the car examples shown In this chapter with- 
out the downside of the changed action attribute. Check out this article to learn 
more about routing: http : //tinyurl . com/RoutingWebForms. 


W ith programmatic ways to send a user to another page, you have come to the end of this chapter 
on navigation. With the concepts shown in thischapter, you haveall the knowledge you need to cre- 
ate a highly effective navigation system in your site, from both the client's browser and your own 
server-side code. 

PRACTICAL TIPS ON NAVIGATION 

The following list presents some practical tips on navigation: 

>• When you start building a website that you think will grow in the future, create a logical 
structure right away. Don't place all files in the root of your website, but group logically 
related files in the same folder. Such logical grouping makes it easier for you to manage the 
site and for your users to find the pages they want. Although it's easy to move a page in a 
Menu or Treeview using the Web . sitemap file, it's more difficult if you are also using pro- 
grammatic redirects or transfers, because you also need to update the server-side code to 
reflect the new site structure. To create a solid page structure, you can draw it out on paper 
before you start with the site, or use site map diagramming tools like M icrosoft Visio. 

>• Try to limit the number of main and sub items that you display in your Menu or Treeview 
controls. Users tend to get lost or confused when they are presented with long lists of options 
to choose from. 

>- W hen creating folders to store your pages in, give them short and logical names. It's much 
more intuitive to navigate to a page using www.pianetwrox.com/Reviews than it is to navi- 
gate to a folder with a long name including abbreviations and numbers. 
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SUMMARY 

This chapter familiarized you with navigation in an ASP.N ET website. Users don't just type in the 
address of a web page directly, so it's important to offer them a clear and straightforward navigation 
system. 

A critical foundation for a good navigation system is a good understanding of how URLs worl<. 
URLs come in two types: relative URLs and absolute URLs. Relative URLs are used to point to 
resources within your own site. Absolute URLs enable you to point to resources by their complete 
location, including protocol and domain information. Absolute URLs are mostly useful if you want 
to point to resources outside your own website. 

ASP.N ET offers three navigation controls used in the user interface of a website. These controls 
enable your users to visit the different pages in your site. The Menu control displays either as a verti- 
cal or a horizontal menu, with submenus folding or dropping out. TheTreeview control can show 
the complete structure of the site in a hierarchical way. The siteMappath control displays a bread- 
crumb trail to give users a visual cue as to where they are in the site. 

In addition to the built-in navigation controls, you can also send the user to a different page pro- 
grammatically. ASP.N ET supports two major ways to do this: client side using Response. Redirect 
and Response. RedirectPermanent and Server Side using Server .Transfer. The redirect methods 
instruct the browser to fetch a new page from the server, whereas the transfer method is executed at 
the server. 

In the next chapter you learn more about ASP.N ET user controls, which enable you to reuse specific 
code and user interface elements in different pages in your website. 


EXERCISES 


1 . The Treeview control exposes a number of style properties that enable you to change items in 
the tree. Which property do you need to change if you want to Influence the background color of 
each Item In the tree? What's the best way to change the background color? 


2. What options do you have to redirect a user to another page programmatically? What's the differ- 
ence between them? 


3. You can use the TreeView controls in two different ways: either as a list with items and sub items 
that can be collapsed and expanded by clicking them, or as a static list showing all the items, with 
no way to collapse or expand. What property do you need to set on the control to prevent users 
from expanding or collapsing items in the tree? 

You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 


Menu control 

A navigation control tliat is able to display data, including data 


coming from the web . sitemap file, in a horizontal or vertical 


manner using drop-down or fold-out submenus. 

Permanent redirect 

A mechanism to inform a client, such as a search engine, that a 


page has moved permanently, telling the client to stop request- 
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Server-side transfer 

A redirect to another page that takes place at the server without 


informing the client browser. 

SlteMapDataSource control 

The bridge between the web . sitemap file and the navigation 
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SiteMapPath control 

A navigation control that displays a breadcrumb from the root of 
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the hierarchy of a site. 

Temporary redirect 

A mechanism to redirect a client to a new, temporary location. 

TreeView control 

A navigation control that is able to display data, including data 


coming from the web . sitemap file, in a hierarchical way. 

Web . sitemap 

The XML-based file that contains the logical structure of your 


site. This file drives the other navigation controls. 


User Controls 


WHAT YOU WILL LEARN IN THIS CHAPTER: 


>• What user controls are, how they look, and why they are useful 
>• How to create user controls 

>• How to consume (or use) user controls in your pages 

>" How you can improve the usefulness of user controls by adding 
coding logic to them 

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 
www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the Chapter 8 download. 

In addition to the master pages, themes, and skins discussed in Chapter 6, ASP.N ET 4.5 has 
another feature that enables you to create reusable and thus consistent blocks of information: 
user controls. 

User controls enable you to group logically related content and controls together so they can 
be treated as a single unit in content pages, master pages, and inside other user controls. A 
user control is actually a sort of mini-ASPX page in that it has a markup section and, option- 
ally, a Code Behind filein which you can write code for the control. Working with a user con- 
trol is very similar to working with normal ASPX pages, with a few minor differences. 

In versions of ASP.N ET before 2.0, user controls were often used to create blocks of reus- 
ablefunctionality that had to appear on every page in the site. For example, to create a menu, 
you would create a user control and then add that control to each and every page in the site. 
Because of the ASP.N ET support for master pages, you don't need user controls for these 
scenarios anymore. This makes it easier to make changes to your site's structure. Despite the 
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advantages that master pages bring, there is stili room for user controls in your ASP.N ET websites. 
For exampie, you can buiid a user controi that displays a banner that is shown on some, but not ail 
pages as you'll see in this chapter. 

By the end of this chapter, you'll have a firm understanding of what user controls are and how they 
worl<, enabling you to create functional, reusable blocks of content. 


INTRODUCTION TO USER CONTROLS 

User controls are great for encapsulating marl<up, controls, and code that you need repeatedly 
throughout your site. To some extent, they look a bit like server controls in that they can contain 
programming logic and presentation that you can reuse in your pages. H owever, rather than drag- 
ging existing ones from the VSToolbox, you need to create your own user controlsand then add 
them to your ASPX pages, as you learn how to do later in this chapter. 

Though master pages enable you to create content that is displayed in all pages in your site, it's com- 
mon to have content that should appear only on some, but not all, pages. For example, you may 
want to display a banner on a few popular pages, but not on the homepage or other common pages. 
Without user controls, you would add the code for the banner (an image, a link, and so on) to each 
page that needs it. W hen you want to update the banner (if you want to use a new image or link), 
you need to make changes to all pages that use it. If you move the banner to a user control and use 
that control in your content pages instead, all you need to change is the user control and the pages 
that use it pick up the change automatically. This gives you a flexible way to create reusable content. 

User controls have the following similarities with normal ASPX pages: 

>■ They have a markup section where you can add standard markup, server controls, and plain 
HTM L. 

>• They can be created and designed with Visual Studio in M arkup. Design, and Split View. 

>• They can contain programming logic, either inline or with a Code Behind file. 

>■ They give you access to page-based information like Request. Querystring. 

>■ They raise some (but not all) of the events that the page class raises, including mit. Load, 

and PreRender. 

You should also be aware of a few differences. User controls have an .ascx extension instead of 
the regular .aspx extension. In addition, user controls cannot be requested in the browser directly. 
Therefore, you can't link to them. The only way to use a user control in your site is by adding it to a 
content or master page or another user control (which eventually should be added to a page). 

In the remainder of this chapter, you see how to create a user control that is capable of displaying 
banners. T he user control can present itself as a horizontal or vertical banner to accommodate for 
differently sized regions in your pages. In the next section, you see how to create a user control. The 
sections that follow show you how to use that control in an ASPX page. 
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Creating User Controls 

You add user controlsto the site I ike any otiier content type: tlirougli tlieAdd N ew Item dialog box. 
Similar to pages, you get the option to choose the programming languageand whether you want to 
place the code in a separate Code Behind file. Figure 8-1 shows the Add N ew Item dialog box for a 
user control. 

Add New Item - Site I Ldi J [ 


Sort by: [ Default | " | jj" \- Search ln;tr,lled Templates fi' 


Visual Basic 


Master Page 

Visual C# 


Tjfpe: Visual C# 

Visual C# 



An ASP.NET server control created using 

Online 


Web User Control 

Visual C# 


the visual designer 



ADO.NET Entity Data Model 

Visual C# 





A)AX-enabledWCFSeivice 

Visual C# 





Browser File 

Visual C# 





Class 

Visual C# 




< > 

DataSet 

Visual C# 




<\ 

■ 

i;> 




Name; WebUserControl.ascx 0 Place code in separate file 

Q Select master page 

Add Cancel 


FIGURE 8-1 


0 nee you add a user control to the site, it is opened in the Document Window automatically. The 
first thing you may notice is that a user control doesn't have an @ page directive, but rather an @ 
Control directive, as shown in this examplethat uses Code Behind: 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" 
Inherits="WebUserControl" %> 

This marks the file as a user control, so the ASP. N ET run time knows how to deal with it. Other 
than that, the directive is similar to a standard ASPX page that doesn't use a master page. 

With the user control open in the VS Document Window, you can use all the tools you have used 
in the previous seven chapters to create pages. You can use the Toolbox to drag controlsin M arkup 
and Design View, the CSS windows to change the look and feel and content of the user control, and 
the Properties Grid to change the properties of controls in your user controls. You can also write 
code that reacts to the events that the control raises. 

To try this out yourself, the next exercise shows you how to create your first user control. In a later 
exercise, you see how to use the control in ASPX pages in your site. 
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TRY IT OUT 


Creating a User Control 


In this exercise, you create a basic user control that displays a single vertical banner using an image 
control. In later exercises, you see how to use this control in your pages and how to add another (hori- 
zontal) image. 

For this exercise, you need two images that represent banners— one in portrait mode with dimensions 
of roughly 120 x 240 pixels, and one in landscape mode with a size of around 486 x 60 pixels. The 
Resources folder for this chapter's code download that comes with this bool< has these two images, 
but you could also create your own. Don't worry about the exact size of the images; as long as they are 
close to these dimensions, you should be fine. 

1. 

2. 


3. 
4. 


5. 


6. 


8. 


Open the Planet Wrox site in VS. 

If you haven't done so already, create a new folder called controls in the root of the site. 
Although user controls can be placed anywhere in the site hierarchy, placing them in a separate 
folder makes them easier to find and manage. 

Create another folder called Images at the root of the site. 

Using File Explorer (Windows Explorer on Windows 7), open up the Resources folder for this 
chapter (at C:\BegASPNET\Resources\chapter 08 if you followed the instructions in the intro- 
duction of this bool<). If you haven't done so already, you can download the necessary resources 
from www.wrox.com. Drag (or copy and paste) thefilesBanneri20x240.gif and Banner486x6o 
.gif from File Explorer into the images folder you created in step 3. If you're using your own 
images, drag them into the images folder as well and give them the same names. 


Right-clicl< the controls folder and choose Add o Add N ew Item. 
In the dialog box that follows, choose your programming language, 
clicl< Web User Control, and mal<esurethat PlaceCodein Separate 
File is checl<ed, as shown in Figure 8-1. N ame the file Banner and 
then click Add to add the control to the site. N otice how VS adds the 
extension of .ascx for you automatically if you don't type it in. VS 
does this for all file types you add through the Add N ew Item dialog 
box so you don't need to type the extension yourself. Your Solution 
Explorer should now look like Figure 8-2. 

Switch the user control to Design View and drag a panei from the 
Standard category of the Toolbox onto the design surface. Using the 
Properties G rid, change the id of the panei to verticaipanei. 

From theToolbox, drag an image control into the Panel. Select the 
Image and then open the Properties Grid. Locate the imageuri prop- 
erty and click its ellipsis button, shown in Figure 8-3. 


Solution Explorer 


(2 'o • « 

Search Solution Explorer (Ctri+;) 
1^ Solution 'Site' [1 project] 


m About 
0 App_Code 
C5 App_Themes 
^ Controls 
> ^ Banner.ascx 

Demos 

Images 

S Bannerl20x2^.gif 
S Banner486x60.gif 
MasterPages 

^ Reviews 

^ Scripts 

£ Styles 

^ DefauK.aspx 

^ Login.aspx 

O packages.config 

Q Web.config 

^ Web.sitemap 


Browse to the images folder, select theBanneri20x24o .gif image, 

and click OK to add it to the user control. Your Design View now figure 8-2 

looks like Figure8-4. 

Using the same Properties Grid, locate theAiternateText property and typeThis is a sample 
banner. M ost browsers display the alternate text (rendered as a client-side ait attribute) only 
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9. 


10. 


when the image cannot be displayed correctly. Some older browsers show the alternate text as the 
tooltip for the image when you hover your mouse over it. 

Switch to M arl<up View and if your panei control has Height and width attributes that were 
added by default when you dragged it on the page, remove both of them. 


W rap the image in a standard <a> element and set its href attribute 
to http://p2p.wrox.com. If you Want, you can usethea codesnip- 
pet to insert the bare linl< for you. To do this, type the letter a and 
then press Tab. VS inserts a linl< for you and enables you to type in 
the href value directly. When you then press Tab again, the content 
of the linl< is selected, which you can delete by pressing Del (the 
Image control Will be the contents of the linl<). Finally, cut the clos- 
ing </a> tag and move it to after the image. 


Imagel System.Web.UI.WebControls.lr ■ 

CssClass 
ForeColor 

ImageUrl 

The URL of the image to be shown. 
FIGURE 8-3 
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FIGURE 8-4 


11. Set the target of the anchor tag (<a>) to _biank to force the browser to open up the page in a 
new window when the image is clicked. W hen you're done, the code for the entire user control 
should lool< lil<e the following code, except for the Language attribute that you may have set to vb 
and the AutoEventWireup that is False by default in VB.N ET: 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile= "Banner . ascx . cs" 

Inherits="Controls_Banner" %> 
<asp:Panel ID="VerticalPanel" runat="server"> 
<a href ="http : //p2p .wrox. com" target="_blank"> 

<asp:Image ID="Imagel" runat=" server" AlternateText="This is a sample banner" 
ImageUrl="~/ Images/Banner 12 0x24 0 .gif " /> 

</a> 

</asp : Panel > 


12. Save the changes by pressing Ctrl-f-S and then close the user control file by pressing Ctrl4f 4. 


290 I CHAPTERS USER CONTROLS 


How It Works 

The design experience of user controls in tlieVisual Studio IDE is identical to that of pages. You can 
use drag and drop; theToolbox; the M arkup, Split, Design Views; and so on. This mal<es it easy to 
worl< with user controls because you can use all the familiar tools you also use for page development. 


The control you just created displays a single image wrapped in an anchor element. In the next sec- 
tion, you see how to add the user control to the master page so it will be displayed in the sidebar 
<aside> element of every page in the site. Later sections in this chapter show you how to add the 
other image that you can use to display a horizontal banner in individual content pages. 

Adding User Controls to a Content Page or Master Page 

To use a user control in a content or master page or in another user control, you need to perform 
two steps. First, you need to register the control by adding an @ Register directive to the page or 
control where you want the user control to appear. The second step involves adding the tags for the 
user control to the page and optionally setting some attributes on it. 

A typical @ Register directive for a user control lool<s lil<ethis: 

<%e Register Sr c-"ControlName.ascx" TagName-" ControlName" TagPref ix="ucl" %> 


The directivecontains three important attributes, described in the following table. 


Attribute 


Src 

Points to tlie user control you want to use. To mal<e it easier to move pages at a 
later stage, you can also use the tilde (~) syntax to point to the control from the 
application root. 

TagName 

The name for the tag that is used in the control declaration in the page. You're free 
to make up this name, but usually it is the same as the name of the control. 

TagPref ix 

Holds the prefix of the TagName that is used in the control declaration. Just as 
ASP.NET uses the asp prefix to refer to its controls, you need to provide a prefix for 
your own user controls. By default, this prefix is uc followed by a sequential num- 
ber, but you can also change it to your own liking— for example, to your own com- 
pany name or a custom abbreviation. 


Considering the user control you created in the preceding exercise, your @ Register directive could 
lool< lil<ethis: 

<%(S Register Src="~/Controls/Banner.ascx" TagName="Banner" TagPref ix="ucl" %> 

When the control is registered, you can add it to the page using the Tagprefix: TagName construct, 
similar to the way you add standard server controls to a page. Given the® Register directive for 
the banner control, you need the following marl<up to add the control to your page: 

<ucl: Banner ID="Bannerl" runat=" server" /> 
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This is the minimum code needed for a user control in a page. N ote that the controi is defined by 
a combination of the TagPref ix and the TagName. The other two attributes— id and runat— are 
standard attributes that most controls in an ASP.N ET page have. 

Fortunately, in most cases, you don't have to type all this code yourself. W hen you drag a user con- 
trol from the Solution Explorer into a page in Design View, VS adds the required code for you auto- 
matically. The following exercise demonstrates how thisworl<s. 


TRY IT OUT 


Adding the User Control to Your Page 


In this exercise, you add the user control Banner .ascx to the master page, so it displays a banner on 
each page in the site in the sidebar area. 

1. Open up Frontend. master from the MasterPages folder and switch it into Design View. 

2. Locate the drop-down list that enables you to select a theme, position your cursor right after the 
drop-down list, and press Enter three times to create some room. 

3. From the Solution Explorer, drag the Banner . ascx file from the Contro Is folder into the empty 
spot you just created. Design View is updated and now looks lil<e Figure 8-5. 


Frontend. master* -0 X 


Select a Theme 
[Monochrome ▼! 


wrcBC ^ 

This 

is a 
sample 
banner 


o Deiign ] a Split ' " Source I |<| | <di^*PageWrapper>]| <aside*Sidebar> j <uc1;Banner#Banner1 > [►] 


FIGURE 8-5 


COMMON MISTAKES If your Design View doesn't look like this, but looks 
much closer to how the file ends up in the browser, you may still have the 
styieSheetTheme set in the Web . conf ig file. Also, you may have more or fewer 
options selected in the View O Visual Aids or View O Formatting Marks menu, 
which may affect your display. 
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4. Switch to M arkup View and locate tlie® Register directive at tlie top of tliefiie. If the src attri- 
bute starts with two dots, change them to a tilde (~): 

<%@ Register Src="~/Controls/Banner.ascx" TagName="Banner" TagPref ix="ucl" %> 

5. Save the changes to the master page and close it. 

6. Open the Monochrome. CSS file from its theme folder and add the following CSS code: 

img 
{ 

border : 0 ; 

} 

7. Copy this rule set to the other theme (add it to DarkGrey.css). 

8. Save all your changes, right-clicl< Default .aspx in the root of your site in the Solution Explorer, 
and chooseView in Browser. 

9. The banner is now displayed below the drop-down list. Switch to the other theme and you'll see 
the same banner appear. W hen you clicl< the banner, a new window is opened that tal<es you to the 
site you linl<ed to in the previous exercise. If you don't seethe banner appear at all, checl< to see if 
you're running ad-blocking software on W indows or in your browser. For example, Firefox has an 
add-on called Adblock Plus that may block the banner in your web page based on its dimensions. 

How It Works 

W hen you dragged the user control onto the design surface of the master page, VS performed two 
tasks: first it added the® Register directive to tell the page whereto look for the user control. It then 
added the control declaration right below the drop-down list. 

When the page loads, theASP.N ET run time sees the control declaration and injects the output of 
the control at the specified location. I n this example, the panei, the <a> element, and the image are 
inserted in the sidebar region of the page. If you look at the H TM L for the page in the browser, you see 
the following code: 

</select> 
<br /xbr /> 

<div id= " Banner l_VerticalPanel " > 

<a href ="http : //p2p .wrox . com" target="_blank" > 

<img id=" Banner l_Imagel" src="Images/Bannerl20x240 .gif " 
alt="This is a sample banner" /> 

</a> 
</div> 

The Panel control has been transformed into an H TM L <div> element and the image control into an 
<img> element. Because the anchor element (<a>) was defined with plain H TM L in the user control, it 
ends up exactly as you wrote it. The AiternateText property has been changed to an ait attribute. 

N otice how the id of the panel has been changed from verticaipanei to the client ID Banneri_ 
verticaipanei. This is necessary to give the <div> tag a uniqueclient-side id attribute that is used in 
client-side scripting. The same has happened to the id of the <img> element. You see more about this in 
a later section of this chapter. 
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N ormally, when you put an <img> element inside an <a> element to iinl< it, tlie browser draws a border 
around tiieimage. Tiie border isusually bluefor unvisited linl<sand purplefor linl<syou iiave visited 
before, tiiougii you couid iiavesomeCSS code targeting a dements tliat overrides tiiese default colors. 
To remove that border completely, you need to add the following CSS: 

img 
{ 

border: none; 

} 

When you add a user control to a page, VS usually refers to the control using a relative path. In this 
exercise, this path first contained two dots (. .) to indicate the parent folder, followed by the controls 
folder, and finally by the name of the control: 

<%@ Register Src= ".. /Controls/Banner . ascx" TagName= "Banner " TagPref ix="ucl" %> 

By changing the two dots to the tilde symbol, it becomes easier to move your pages around in your site 
because the src attribute now always points to the controls folder at the application's root, no matter 
where the page that consumes the control is located. If your src attribute already contained the tilde, 
you don't have to change anything. 


Though the tilde syntax mal<es your pages with user controls a little easier to manage, there is an 
even easier way to register your user controls sitewide. 


Sitewide Registration of User Controls 

If you have a control that you expect to use quite often on separate content pages in your site, lil<e 
the banner in the previous examples, you can register the control globally in the web.config file. 
Thisway it becomes availablethroughout the entire site, without the need to register it on every 
page. The following exercise shows how to do this. 


lljimmg^Q Registering User Controls in the Web.config File 

In this exercise, you register the Banner, ascx user control in the web.config file. You can then 
remove the @ Register directive from the master page because it isn't needed anymore. After you 
have changed the web.config file, adding the same user control to other pages will no longer add the® 
Register directive to the page. 

1. Open the Web.config file from the root of the site. If you're familiar with versions of ASP. N ET 
prior to .N ET 4, you may find the web.config worryingly empty. But don't worry; the functional- 
ity it included has not been removed from .N ET. The configuration information placed in the web- 
site's Web . conf ig file has now been moved to the central web . conf ig and Machine . conf ig files 
that apply to the entire machine instead. This gives you a much cleaner configuration file, making it 
easy to focus on your own stuff that you put in there. 


2. Locate the <pages/> element that you used in Chapter 6 to apply the theme, and within its tags 
add the following bolded code that contains a <contro is> element with a child <add/> element. 
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N ote: you may need to change the self-closing tag of the <pages> element to a full 
closing tag. 

<pages theme= "Monochrome "> 
<controls> 

odd tagPref ix="Wrox" tagName= "Banner" src=" -/Controls/Banner. ascx" /> 
</controls> 

</pages> 

3. Save the changes and close the file. 

4. Open the master page again in M arl<up View and locate the Banner control in the sidebar area. 
Change uci to Wrox! 

<Wrox: Banner ID=" Banner 1" runat=" server" /> 

If the declaration for your user control has its own closing tag, VS updates the closing tag for you 
automatically: 

<Wrox:Banner ID="Bannerl" runat="server"></Wrox:Banner> 

5. Scroll all the way up in the master page file and remove the entire line with the® Register 
directive. 

6. Save and close the master page. 

7. Open Default .aspx again in your browser. N ote that the banner is still present in the sidebar 
area. 


COMMON MISTAKES If you get an error, verify that you added the correct code 
at the right iocation to the web . conf ig file. Also, make sure that you changed 
uci to Wrox in the control declaration and that you deleted the @ Register 
directive from the master page. 


How It Works 

W ithout the® Register directive in the master page, the ASP. N ET run time scans the web. conf ig file 
for controls that have been registered there. It then finds the registration of the wrox: Banner control so 
it is able to successfully find the file using the src attribute and add its contents to the page hierarchy. 

With the control registration added to the web. conf ig file, it's much easier to move or rename the con- 
trol. Instead of finding and replacing the® Register directive in all pages that use it, the only thing 
you need to change is the registration in the web. conf ig file. W hen you make a change there, all pages 
using the control will automatically find the new location or name of the user control. 


Useful as user controls are, they have a few caveats that you need to be aware of. 
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User Control Caveats 

Earlier you saw that the id of the panei control you added to the page was modified by the ASP. 
N ET run time. Instead of getting a <div> element with its id set to verticaipanei, you got the fol- 
lowing id: 

<div id= "Bannerl_VerticalPanel " > 
</div> 

In many cases, this isn't problematic because you often don't need the client id. H owever, if you 
need to access this control from client-side JavaScript or CSS, it's important to understand why this 
id is modified. 

Understanding and Managing Client IDs 

By design, all elements in an H TM L page need to be unique. G iving them an id attribute is not 
required, but if you do so, you have to mal<e sure they are unique. To avoid conflicts in the final 
HTML code of the page, ASP.N ET ensures that each server-side element gets a unique client id 
by prefixing them with the name of their naming container. W ithin a naming container all ele- 
ments should have unique IDs. VS warns you when you try to add a control that doesn't have a 
unique server ID. For example, you get an error when you try to add a second panel with an ID of 
verticaipanei to the user control. But what if you place two Banner controls in the same page, or 
one in the master page and another in a content page? Potentially, you could end up with two client 
<div> elements with an I D of VerticalPane 1. To avoid this problem, ASP.N ET prefixes each ele- 
ment with the ID of its nearest naming container. For the panei inside the user control it means it's 
prefixed w ith eanneri, the server-side I D of the user control i n the master page. 

You can use the client id of a control to get its full client-side id. The following snippet shows how 

to display the ClientlD of the Panel control on a fictitious Label control within the Banner, ascx 

user control: 

VB.NET 

Labell.Text = VerticalPanel . ClientlD 
C# 

Labell.Text = VerticalPanel . ClientlD; 

With this code, the Label control's Text property will contain Banneri_verticaiPanei, the client- 
side id of the Panel. You See a more practical example of using ciientiD in the next chapter. 

With an explicit ID, it's easier to predict the final id of a client-side HTML element, which in turn 
mal<es it easier to reference those elements in JavaScript or CSS. 


NOTE Because the ASP.NET run time can change the client id attributes of 
your HTML elements, you may have trouble using CSS ID selectors to refer to 
elements. The easiest way to fix this is to use Class selectors instead of ID selec- 
tors. Alternatively, you can use the control's ciientiD when using embedded 
style sheets. 
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ASP.N ET 4 introduced a new option to influence tliedient ID: tlie ciientiDMode. 

Introducing ClientlDMode 

Starting witii ASP.N ET 4, eacli web control now has a ciientiDMode property that enables you 
to determine the way the client ID is made up. You can set the client iDMode to any of these four 
values: 


VALUE 

DESCRIPTION 

AutoID 

Generates the ID as it did in previous versions of ASP.NET. 

Inherit 

With this setting the control inherits its cilentiDMode value from its parent 
control. 

Predictable 

This value is mostly used for data-bound controls (discussed in Chapter 13 and 
later) and enables you to create predictable client IDs for repeating elements. 
The client ID of a control is generated by concatenating the client ID of the parent 
control and the server ID of the control itself The ID can optionally be extended 
with a unique value for each element using the cilentiDRowSuf f Ix property. 

Static 

With this value the client ID will be exactly the same as the server ID that you 
set. This enables you to set the client ID explicitly, giving you greater control. 
However, it doesn't prevent you from assigning the same value twice, which may 
result in duplicate IDs in the client's HTML. Use with care! 


The default value of ciientiDMode for the Page class is predictable and the default value for a 
control is inherit. This in tum means that the default ID generation mode for controls is effec- 
tively Predictable as they inherit that setting from page. If you use Visual Studio to convert a Web 
project to ASP.N ET 4.5 from an earlier version, Visual Studio automatically sets the site default to 
AutoID in the <pages> element in theweb.config fileto maintain bacl<wards compatibility lil<ethis: 

<pages controlRenderlngCompatlbllltyVerslon="3 . 5" clientIDMode= "AutoID"/ > 

Currently, the Planet Wrox website doesn't benefita wholelot from changing the client IDsfor any 
of the existing controls, so there's no need to change any of them right now. H owever, in later 
chapters, you use the ciientiDMode property again to create cleaner client IDs. 

Although the current banner user control makes it easy to display a banner at various locations in your 
site, it isn't very smart yet. All it can do is display a linl<ed image and that's it. To improve its usability, 
you can add behavior to the control so it can behave differently on different pages in your site. 


ADDING LOGIC TO YOUR USER CONTROLS 

Although using controls for repeating content is already quite useful, they become even more useful 
when you add custom logic to them. By adding public properties or methods to a user control, you 
can influence its behavior at run time. W hen you add a property to a user control, it becomes avail- 
able automatically in Intel I i Sense and in the Properties Grid for the control in the page you're worl<- 
ing with, mal<ing it easy to change the behavior from another file lil<e a page. 
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To add properties or methods to a user control, you add them to the Code Behind of the control. 
The properties you add can tal<e various forms. In its simplest form, a property lool<s exactly lil<e 
the properties you saw in Chapter 5. For more advanced scenarios you need to add View State prop- 
erties which are able to maintain their state across postbacl<s. In the next two exercises you see how 
to create both types of properties. 

Creating Your Own Data Types for Properties 

To mal<e the banner control more useful, you can add a second image to it that displays a horizontal 
banner. You could also add a property to the control that determines whether to display the vertical 
or horizontal image. You could do this by creating a numeric property of type system. Byte. Then 
0 would be vertical and i would be horizontal, for example. H owever, this mal<es it hard to remem- 
ber what each number represents. You can mal<e it a bit easier by creating a string property that 
accepts the values Horizontal and vertical. However, strings cannot be checl<ed at compile time, 
so you may end up with a spelling mistal<e, resulting in an error or in the incorrect banner being dis- 
played. The .N ET Framework supplies a nice way to solve this by enabling you to create your own 
data type in the form of an enumeration. With an enumeration, or enum for short, you assign num- 
bers to human-friendly text strings. Developers then use this readable text, while under the hood the 
numeric value is used. The following snippet showsa basic example of an enum (notice how theVB 
example doesn't use commas, whereas they are required in C#); 

VB.NET 

Public Enum Direction 

Horizontal 

Vertical 
End Enum 

C# 

public enum Direction 
{ 

Horizontal , 
Vertical 

} 

With these enums, the compiler assigns numeric values to the Horizontal and vertical members 
automatically, starting with o and counting upward. You can also define numeric values explicitly if 
you want: 

VB.NET 

Public Enum Direction 

Horizontal = 0 

Vertical = 1 
End Enum 

C# 

public enum Direction 
{ 

Horizontal = 0, 
Vertical = 1 

} 
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The cool thing about enums is that you wiii get InteiiiSensein codefiies, in the Properties Grid, 
and even in the code editor for your user controls. Figure 8-6 shows how InteiiiSense i<ici<s in for a 
VB.N ET codefiie. 


Din nyOirection As Direction = 


(H Direction. Horizontal 
(=] Direction.Vertical 
Common All 

Direction. Horizontal = 0 


FIGURE 8-6 


In Figure 8-7 you seethe same list with values from theenum in the Properties Grid. 


Properties 
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Bannerl <BANNER> 
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Bannerl 
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runat 
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DisplayDirection 

pertica^^^ 




FIGURE 8-7 


And in Figure 8-8 you seethe same list appear for a property of a user control in M arl<up View. 


<Wrox:Banner ID="Bannerl" runat="server" Directions"" /> 
<b'r /> 
</aside> 

<footer>Footer Goes Here</footer> 

</div> 

FIGURE 8-8 



Just as with other codefiies 11 l<e classes, you should put your enums in a file under the App_code 
folder. If you have more than one of them, you can store them all in the same file or create a separate 
file for each enum. 

Enums are great for simple and short lists. They help you find the right item quickly without memo- 
rizing "magic numbers" Iil<e0 or 1, but enableyou to use human-readable text strings instead. 

In the next exercise, you see how to create an enum and use it in your Banner user control. 


Creating Smarter User Controls 

In this exercise, you add a second banner to the user control. This banner displays as a horizontal 
image inside its own panel. To avoid the two banners showing up at the same time, you add a property 
that determines which banner to display. Pages that use the control can then define the correct banner. 

1. Start by creating an enumeration that contains two members for the different directions: verti- 
cal and horizontal. To do this, right-clicl< theApp_code folder and chooseAdd o Add N ew Item. 
Choose your programming language and add a class file called Direction. 
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2. Once the file opens, clear Its contents and add the following code to It: 

VB.NET 

Public Enum Direction 

Horizontal 

Vertical 
End Enum 

C# 

public enum Direction 
{ 

Horizontal , 
Vertical 

} 

3. Save and close the file. 

4. Open the Code Behind for the user control Banner . ascx and add the following property. To help 
you create properties, VS comes with a handy code snippet. To activate the snippet In C#, type 
prop and then press Tab twice. VS adds the code structure for an automatic property for you. For 
VB.N ET, you can type property and then pressTab. H owever, this creates a full property rather 
than an automatic property (which Is what Is used In this exercise), so you're better off typing In 
the code manually In this case. Once the code Is Inserted, you can pressTab again to move from 
field to field, each time typing the right data type or property name. Complete the code so It looks 
like this: 

VB.NET 

Public Property DisplayDirection As Direction 
C# 

public Direction DisplayDirection { get; set; } 


COMMON MISTAKES Make sure you add the property outside the Page_Load 
method (when you're working with C#) but before the closing End class (in 
VB.NET) or the closing curly brace for the class (in C#). 


N ote that the name of the property Is DisplayDirection and Its data type Is Direction, the 
enum you defined earlier. 

5. Open the M arkup View of Banner .ascx, copy the entire <asp:Panei>, and paste It right below 
the existing panei. N ame the control HorizontaiPanei and set the imageuri of the Image to 
-/images/Banner486x60.gif. If you Want to browsefor the Image Instead of typing Its path 
directly, position your cursor In M arkup View after the opening quote of the imageuri attribute's 
valueand press Ctrl +Space. Choosing Pick URL In the menu that appears enables you to browse 
for a file. Your codeshould now look llkethls: 

<asp:Panel ID="HorizontalPanel" runat=" server " > 
<a href = "http : //p2p .wrox. com" target^ "_blank" > 

<asp:Image ID="Image2" runat="server" AlternateText= "This is a sample banner" 
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ImageUrl="~/Images/Banner486x60 .gif " /> 

</a> 
</asp : Panel> 

6. Switch back to the Code Behind of the control and add the following bolded code to thepage_ 
Load handler. In C#, the handler should already be there. In Visual Basic, you can choose (Page 
Events) from the left drop-down list at the top of the Document Window and Load from the right 
drop-down list to set up the handler, or you can double-click the user control in Design View. 

VB.NET 

Protected Sub Page_Load (sender As Object, e As EventArgs) Handles Me. Load 
Select Case DisplayDirection 
Case Direction. Horizontal 

HorizontalPanel .Visible = True 
VerticalPanel .Visible = False 
Case Direction. Vertical 

VerticalPanel .Visible = True 
HorizontalPanel .Visible = False 
End Select 
End Sub 

C# 

protected void Page_Load (object sender, EventArgs e) 
{ 

switch (DisplayDirection) 
{ 

case Direction. Horizontal : 

HorizontalPanel .Visible = true; 
VerticalPanel .Visible = false; 
break; 

case Direction. Vertical : 

VerticalPanel .Visible = true; 
HorizontalPanel .Visible = false; 
break; 

} 

} 

7. Save and close the two files that make up the user control because you're done with them for now. 

8. Open up the master page file once more in M arkup View and locate the user control declaration. 
Right after the runat=" server " attribute, add the following DisplayDirection attribute that 
sets the correct image type: 

<Wrox:Banner ID="Bannerl" runat="server" DisplayDirectlon= "Horizontal " /> 

Intel 11 Sense will help you pick the right DisplayDirection from the list. If you don't get 
IntelliSense, wait a few seconds until VS has caught up with all the changes. Alternatively, save 
and close all open files (or restart VS), open the master page, and try again. 

9. Save all changes and request Default .aspx in the browser. N otethat the right sidebar area now 
contains the horizontal image, breaking the layout a little because the image is too wide for the 
sidebar. If you don't see the banner appear at all, check your system for ad-blocking software that 
may stop the banner image from appearing. 
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10. Switch back to the master page and change the DispiayDirection from Horizontal to 

Vertical. Save your changes and refresh the page in the browser. The sidebar should now display 
the vertical banner, as shown in Figure 8-9. 


'/loc8lhost491M/ 


P • 2 C 


^ Welcome to Planet Wrox 


Home 


Hi there visitor and welcome to Planet Wrox 

We're glad you're paying a visit to Wiw RtanetWrox com, the coolest music community site on the Internet. 
Feel free to have a look around; there are lots of interesting reviews and concert pictures to t)e found here. 
You can log in here 



FIGURE 8-9 


11. Open theAboutus.aspx page from the About folder in M arl<up View. If you don't have that file, 
create it first. In the cpMaincontent contentPiaceHoider, add some text describing you or your 
organization and the reason you created the site. Switch to Design View and drop the Banner 

. ascx control from the Solution Explorer onto the design surface, right below the text you just 
added. VS detects the user control in the master page called Bannen and assigns the id of Banner2 
to the user control you just dropped. N otice how you see four banners in Design View; two come 
from the Banner control in the master page and the other two come from the Banner control in the 
About Us page itself. At run time, two of them will be hidden. 

12. Select the user control you just added in Design View, open its Properties Grid, and set the 

Display-Direction tO Horizontal. 

13. Save all your changes and then press Ctrl-ff 5 to open the About Us page in your browser. In addi- 
tion to the banner in the right sidebar, you should now also seethe horizontal banner appear in the 
content area. 

How It Works 

The property called DispiayDirection gives your user control some extra behavior. Pages using the 
control should now set the DispiayDirection lil<e this: 

<Wrox:Banner ID="Bannerl" runat= " server " DisplayDirection="Horizontal" /> 
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W hen the control instance is created by the ASP. N ET run time, the vaiueyou set in the control decla- 
ration is assigned to the property DispiayDirection. If you don't assign a value, the default will be 
Horizonta 1 for the current definition of the Direction enum as that's the first item in the list and has 
an implicit value of zero. 

W hen the page loads, this code in the user control is executed: 

VB.NET 

Select Case DispiayDirection 
Case Direction . Horizontal 

HorizontalPanel .Visible = True 
VerticalPanel .Visible = False 
Case Direction. Vertical 

VerticalPanel .Visible = True 
HorizontalPanel .Visible = False 
End Select 

C# 

switch (DispiayDirection) 
{ 

case Direction . Horizontal 
HorizontalPanel .Visible 
VerticalPanel .Visible = 
break; 

case Direction. Vertical : 
VerticalPanel .Visible = 
HorizontalPanel .Visible 
break; 

} 

This code uses a select case/switch blocl< to determine which image to show. W hen the 

DispiayDirection equals Horizontal, the Visible property Of HorizontalPanel iS Set tO True and 

the other control is hidden. The same principle is applied to the Vertical setting. 


= true; 
false; 


true ; 
= false; 


Implementing View State Properties 

in addition to the DispiayDirection, another useful property for the user control would be the 
URL that the banner linl<s to. In the next section, you see how to implement this and learn how to 
create a View State property called Navigateuri that is able to survive postbacl<s. 

^^^^^^Q Implementing the NavigateUrl Property 

To be able to set the UR L that a user is tal<en to programmatically, you need to be able to access 
the anchor tag that is defined in the control's markup. To do this, you need to give it an id and a 
runat=" server" attribute. To be able to programmatically set the new Navigateuri property that 
you'll add to the Banner control and to ensure that this property survives postbacl<s, you need to imple- 
ment a View State property. To show you why you need a View State property, the first three steps of 
this exercise have you modify the About Us page so it sets the DispiayDirection of the Banner control 
programmatically. You'll then cause a postbacl< so you can see that the value for the direction gets lost 
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because it doesn't maintain its state in View State. Tlie second part of tlie exercise tlien sliowsyou liow 
to impiement tlieNavigateuri property tliat isabieto maintain its state. 

1. Open tlie Code Belli nd of Aboutus . aspx and add tliefoiiowing boided codeto tlie page_Load 
event liandier. If the handler isn't there yet, switch to Design View and double-click somewhere on 
the gray area of the page. 

VB.NET 

Protected Sub Page_Load{ sender As Object, e As EventArgs) Handles Me. Load 
If Not Page. IsPostBack Then 

Banner2 .DisplayDirection = Direction. Vertical 
End If 

End Sub 

C# 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

if (! Page. IsPostBack) 
{ 

Banner2 .DisplayDirection = Direction. Vertical; 

} 

} 

Verify that the Banner user control has an id of Banner2 in the M arl<up View of the page, or 
update your code accordingly. 

2. Switch to Design View and add a Button control by dragging it from the Standard category of 
the Toolbox on top of the Banner .ascx control that is placed inside the page (not the one that's 
defined in the master page). There's no need to write any code for the Button control's ciick 
event. 

3. Save the page and open it in your browser. Because of the code in page_Load, the first time the 
page loads, the banner at the bottom of the screen displays the vertical banner. N ow clicl< the 
button so thepagewill reload. This time, the page displays the horizontal image. Because the 

DisplayDirection Of the Banner COntrol iSSetin Page_Load Only When Page . IsPostBack iS 

False, that setting is lost when you post back, causing the banner to revert to its default setting of 

Horizontal. 

4. To avoid this problem with theNavigateuri, you need to implement it as a View State property 
w here the viewstate collection is used as the backing store to store the underlying value. That 
way, the value is sent to the browser and back to the server with every request. To implement the 
property, add the following codeto the Code Behind of the Banner .ascx user control, right below 
the DisplayDirection property you created earlier. 

Remember, you don't have to type all this code manually because the download that comes with 
this book contains all the code shown. 

VB.NET 

Public Property NavigateUrl ( ) As String 
Get 

Dim _navigateUrl As Object = ViewState ( "NavigateUrl " ) 
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If _navigateUrl IsNot Nothing Then 

Return CType (_navigateUrl , String) 
Else 

Return "http://p2p.wrox.com" ' Return a default value 
End If 
End Get 

Set (Value As String) 

ViewState("NavigateUrl") = Value 
End Set 
End Property 

C# 

public string NavigateUrl 
{ 

get 
{ 

object _navigateUrl = ViewState [ "NavigateUrl "] ; 

if (_navigateUrl != null) 

{ 

return (string) _navigateUrl ; 

} 

else 
{ 

return "http://p2p.wrox.com"; // Return a default value 

} 

} 

set 

{ 

ViewState ["NavigateUrl"] = value; 

} 

} 

5. Switch to M arkup View of tlie user control and add runat=" serve r" attributes to botli linl<s. 
Give tlie linl< in tlie vertical panel an id of verticaiLink and the other an id of HorizontaiLink. 
They should end up looking like this: 

<a href ="http : //p2p . wrox . com" target="_blank" runat="server" id="VerticalLink"> 
<a href ="http : //p2p . wrox . com" target="_blank" runat="server" id="HorizontalLink"> 

6. Switch back to the Code Behind of the user control (press F7) and modify the page_Load handler 
of the user control so it also sets the HRef property of the anchor element: 

VB.NET 

Case Direction. Horizontal 

HorizontalPanel .Visible = True 

VerticalPanel .Visible = False 

HorizontaiLink. HRef = NavigateUrl 
Case Direction. Vertical 

VerticalPanel .Visible = True 

HorizontalPanel .Visible = False 

VerticalLink.HRef = NavigateUrl 
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c# 

case Direction . Horizontal : 

HorizontalPanel .Visible = true; 
VerticalPanel .Visible = false; 
HorizontalLink.HRef = NavigateUrl ; 
break; 

case Direction. Vertical : 

VerticalPanel .Visible = true; 
HorizontalPanel .Visible = false; 
VerticalLink.HRef = NavigateUrl; 
break; 

7. Save the changes and go back to the Code Behind of Aboutus . aspx. M odify thecodeso it sets the 
NavigateUrl property of thesanner control to a different URL. You should overwrite the code 

that sets the OisplayOirection. 
VB.NET 

Protected Sub Page_Load {sender As Object, e As EventArgs) Handles Me . Load 
If Not Page . IsPostBack Then 

Banner2 .NavigateUrl = "http://imar.spaanjaars.com" 

End If 
End Sub 

C# 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

if (! Page . IsPostBack) 
{ 

Banner2 .NavigateUrl = "http://imar.spaanjaars.com"; 

} 

} 

8. Save all your changes and then request the Aboutus . aspx page in your browser by pressing 
Ctrl4f 5. 


COMMON MISTAKES Make sure you get a fresh browser window, so close any 
windows you may tiave open first. 


Click the horizontal banner at the left side of the page. A new window pops up, showing the U RL 
you set in the previous step. 

9. Close this new window and click the button you added to Aboutus. aspx earlier to cause the page 
to post back to the server. Once the page is reloaded, click the banner image again. You are taken 
to the same site as in step 8. This illustrates the point that the Navigateuri property is now able 
to maintain its value across postbacks, unlike the oispiayoirection property you added to the 
user control earlier. 
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How It Works 

In the first three steps, you witnessed the behavior of non-View State properties. You started off by 
writing some code in the page_Load event handier that sets theDispiayDirection programmaticaiiy: 

VB.NET 

If Not Page . IsPostBack Then 

Banner2 .DisplayDirection = Direction. Vertical 
End If 

C# 

if (! Page . IsPostBack) 
{ 

Banner2 .DisplayDirection = Direction. Vertical; 

} 

Because of the checi< for page.isPostBack, thiscodeoniy fires when the page ioads the first time. It 
doesn't fire when the page is reioaded due to a postbaci<. When it fires, it sets the DisplayDirection 
property of the Banner controi so the banner dispiays the correct image. H owever, as soon as the page 
is posted baci<, this vaiue is iost and the controi reverts to its defauit direction of Horizontal. One 
way to overcome this probi em isto mai<e sure the code fires both the first time and on subsequent post- 
baci<s. Removing thecheci< for page. isPostBack is enough to accompiish this. H owever, this is not 
ai ways a desired soiution. I magine you're getting the correct dispiay direction from a database. Because 
fetching data from a database is a costiy operation, you want to minimize the number of times you hit 
the database. In such scenarios, deveiopers are iii<eiy to fetch the data oniy when the page ioads the 
first time and expect it to stay around on subsequent postbaci<s. That is exactiy what the Navigateuri 
property does. You set its vaiue once and it stays avaiiabie, even if you post the page baci< to the server. 
This is accompiished with a View State property. 

To see how this wori<s, tai<e a iooi< at the setter of that property first: 

VB.NET 

Public Property NavigateUrl ( ) As String 

Set (Value As String) 

ViewState( "NavigateUrl") = Value 
End Set 
End Property 

C# 

public string NavigateUrl 
{ 

set 

{ 

ViewState ["NavigateUrl"] = value; 

} 

} 

When you assign a vaiue to the Navigateuri property, its vaiue is stored in theviewstate coiiection. 
You can see the viewstate coiiection as a bag that enabies you to store data that you can retrieve 
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again after a postback. You identify vaiues in View State using a unique i<ey. In tlieexampietlie i<ey 
equais tlie name of the property so it's easy to see tliey beiong togetiier. 0 nee you assign a vaiue to a 

View State property, it's stored in tiie page in tiie liidden viewstate fieid tliat you iearned about in 

Cliapter 4. Tiiis means it gets sent to tiie browser wlien tiie page ioads and it is sent baci< to tiie server 
w iien tiie page i s posted baci< again. 

W lien the postbaci< occurs, tiiecode in page_Load in the user controi fires again. Just as witii tiie initiai 
request, tiiecode accesses tlieNavigateuri property in the select case/switch bioci<: 

VB.NET 

Case Direction . Horizontal 

HorizontalLink.HRef = NavigateUrl 

C# 

case Direction . Horizontal : 

HorizontalLink.HRef = NavigateUrl; 

Tile vaiue for NavigateUrl is returned by tlie getter of tiie property; 

VB.NET 

Public Property NavigateUrl { ) As String 
Get 

Dim _navigateUrl As Object = ViewState ( "NavigateUrl " ) 
If _navigateUrl IsNot Nothing Then 

Return CType {_navigateUrl , String) 
Else 

Return "http://p2p.wrox.com" ' Return a default value 
End If 
End Get 

End Property 
C# 

public string NavigateUrl 
{ 

get 
{ 

object _navigateUrl = ViewState ["NavigateUrl"] ; 

if (_navigateUrl != null) 

{ 

return (string) _navigateUrl ; 

} 

else 
{ 

return "http://p2p.wrox.com"; // Return a default value 

} 

} 


} 
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This code first tries to get tlie vaiuefrom View State using viewstate ("Navigateuri" ) in VB.N ET or 
viewstate [" Navigateuri" ] in C#, wliicli uses Square braci<ets to access items in a coiiection. If tlie 
vaiue tliat is returned is Nothing or nuii, tlie getter returns tlie defauit vaiuefor tlie property: http:// 

p2p . wrox . com. 

H owever, if tlie vaiue is not Nothing, it is cast to a string using CType in VB.N ET and (string) in C# 
and eventuaiiy returned to tliecaiiing code. Attlieend, tine Navigateuri returned from tlieView State 
property is assigned to tlienRef property of tlie anclior tag again, wliicli is tlien used as tlie URL users 
aretal<en to wlien tliey ciici< tlie image. 


View State Considerations 

Aitliougli View State is designed to overcome tlie probiems of maintaining state as outiined in tlie 
previous exercise, you sliouid carefuiiy consider wlietlier or not you use it. Tlie vaiues you store in 
View State are sent to tlie browser and baci< to tlie server on every request. W lien you store many 
or iarge vaiues in View State, tliis increases tine size of tlie page and tlius negativeiy impacts perfor- 
mance. Never store iarge objects iii<e database records in View State; it's often quici<er to get tine 
data fresli from tlie database on eacli request tlian passing it aiong in tlie liidden View State fieid if 
tlie amount of data tliat needs to be stored is iarge. Aiso, because tine View State is stored witliin 
tlie page and is tlius transferred over the wire, you shouidn't use it to store sensitive vaiues such as 
passwords. 


PRACTICAL TIPS ON USER CONTROLS 

Thefoilowing iist provides some practicai tips on wori<ing with user controis: 

>• Don't overuse user controis. User controis are great for encapsuiating repeating content, but 
they aiso mai<e it a iittie harder to manage your site because code and iogic is contained in 
muitipiefiies. If you're not sure if some content wiii be reused in another part of the site, start 
by embedding it directiy in the page. You can aiways move it to a separate user controi iater 
if the need arises. 

>■ Keep user controis focused on a singie tasi<. Don't create a user controi that is abieto dispiay 
five different types of unreiated content with a property that determines what to dispiay. This 
mai<es the controi difficuitto maintain and use. Instead, create five iightw eight controis and 
use them appropriateiy. 

>■ When you create user controis that contain styied mari<up, don't hardcode styie informa- 
tion iii<ethe cssciass for the server controis contained in the user controi. Instead, consider 
creating separate cssciass properties on the user controi, which are then used to set the 
cssciass of your server controis. This improves the reusabiiity of your user controi, mai<ing 
it easier to incorporate the control in different designs. 
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SUMMARY 

User controls can greatly improve the maintainability of your site. Instead of repeating the same 
markup and code on many different pages in your site, you encapsulate the code in a single control, 
which you can then use in different areas of your site. 

To improve the usefulness of your controls, you can add behavior to them. It's common to create 
controls with properties you can set in consuming pages, enabling you to change the behavior of the 
control at run time. Although View State properties can solve some of the state issues you may come 
across, you should carefully consider whether you really need them. Because these properties add to 
the size of the page, they can have a negative impact on your site's performance. 

You can further improve the Banner control by keeping track of the number of times each image has 
been clicked. The Planet Wrox sitedoesn't implement this, but with the knowledge you gain in the 
chapters about database interaction, this is easy to implement yourself. 

In the next chapter you create another user control that serves as a contact form. By building the 
form as a user control, it's easy to ask your users for feedback from different locations in the site. 


EXERCISES 


1. In this chapter you saw how to create a standard property and a View State property. What is the 
main difference between the two? And what are the disadvantages of each of them? 

2. Currently, the DispiayDirection property of the Banner control doesn't maintain its state across 
postbacks. Change the code for the property so it is able to maintain its state using the viewstate 
collection, similar to how Navigateuri maintains its value. 


3. What are the two main benefits of using a custom enumeration like Direction over built-in types 
like System. Byte Or String? 


You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 

@ Control directive A set of instructions tliat marl<s a file as a User Control and define its 

behavior. 

@ Register directive Used to register user controls and point to their source inside 

pages, master pages, and other user controls. 

The property that enables you to set the alt attribute on images 
that is shown when the image cannot be displayed. 

The central .NET configuration file that applies to your entire system 
and provides defaults for your website's settings. 

A block of content (stored in a file with an . ascx extension and 
an optional Code Behind file) that can be reused in pages, master 
pages, and other user controls in your site. 

View State Properties Properties at the page, master page, or user control level that store 

their values in View State so they can survive postbacks. 


AlternateText 


Machine . conf ig 


User Control 


ViewState collection 


The ViewState collection is the property on the Page, 
userControl, and MasterPage classes that enables you to Store 
and retrieve values using View State. 


Validating User Input 


WHAT YOU WILL LEARN IN THIS CHAPTER: 


>• What user input is and winy it's important to validate it 

>• What ASP.NET 4.5 has to offer to aid you in validating user input 

>" How to work with the built-in validation controls and how to create 
solutions that are not supported out of the box 

>• Howtosende-mailusingASP.NET 

>• How to read text files 

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 
www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the Chapter 9 download. 

So far you have been creating a fairly static website where you control the layout and content 
by adding fixed pages to the site and its navigation menus. But you can make your site a lot 
more attractive by incorporating dynamic data. This data usually flows in two directions: it 
either comes from the server and is sent to the end user's browser, or the data is entered by the 
user and sent to the server to be processed or stored. 

Data coming from the server can be retrieved from many different data sources, including files 
and databases, and is often presented with the ASP.N ET data controls. You see how to access 
databases in Chapter 12 and onward. 

The other flow of data comes from the user and is sent to the server. The scope of this infor- 
mation is quite broad, ranging from simple page requests and "Contact Us" forms to complex 
shopping cart scenarios and wizard-like user interfaces, but the underlying principle of this 
data flow is basically the same in all scenarios— users enter data in a Web Form and then sub- 
mit it to the server. 
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To prevent your system from receiving invaiid data, it's important to vaiidate tliis data before you 
aiiow your system to wori< witli it. Fortunateiy, ASP.N ET 4.5 comes witli a bag of tooisto mai<e 
data vaiidation a simpietasi<. 

Tlie first part of tliis cliapter gives you a good iooi< at tlie vaiidation controls tli at ASP.N ET sup- 
ports. You see wliat controls are available, how to use and customize them, and in what scenarios 
they are applicable. 

The second half of this chapter shows you how to worl< with data in other ways. You see how to 
receive the information a user submits to your site and then send it by e-mail and how to customize 
the mail body using text-based templates. 

By the end of the chapter, you will have a good understanding of the flow of information to an ASP 
.N ET website and the various techniques you have at your disposal to validate this data. 


GATHERING DATA FROM THE USER 

Literally every website on the Internet has to deal with input from the user. Generally, this input can 
be sent to the web server with a number of different techniques, of which get and post are the most 
common. In Chapter 4, you briefly saw the difference between these two methods and saw that get 
data is appended to the actual address of the page being requested, whereas with the post method, 
the data is sent in the body of the request for the page. 

W ith the GET method, you can retrieve the submitted data using the Querystring property of the 
Request object, asdiscussed in Chapter 7. Imagine you are requesting the following page: 

http : / /www. PlanetWrox . com/Reviews/ViewDe tails . aspx?ReviewId=34S;CategoryId=3 

With this example, the query string is Reviewid=34&categoryid=3. The question marl< is used to 
separate the query string from the rest of the address, and the query string itself consists of name/ 
value pairs separated by an ampersand (&). The names and values in turn are separated by the 
equals symbol (=). To access individual items in the query string, you can use the Get method of the 

Querystring Collection: 
VB.NET 

' Assigns the value 34 to the reviewld variable 

Dim reviewld As Integer = Convert. ToInt32(Request. Querystring. GetC'ReviewId")) 
' Assigns the value 3 to the categoryld variable 

Dim categoryld As Integer = Convert .ToInt32 (Request .Querystring. Get ("Categoryld") ) 
C# 

// Assigns the value 34 to the reviewld variable 

int reviewld = Convert . ToInt32 (Request . Querystring . Get { "Reviewld" )) ; 
// Assigns the value 3 to the categoryld variable 

int categoryld = Convert . ToInt32 (Request . QueryString .Get ( "Categoryld" )) ; 

The POST method, on the other hand, gets its data from a form with controls that have been sub- 
mitted to the server. Imagine you have a form with two controls: a TextBox called Age to hold the 
user's age and a Button to submit that age to the server. In the Button control's ciick event, you 
could write the following code to convert the user's input to an integer: 
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VB.NET 

Dim age As Integer = Convert .ToInt32 (Age .Text) ' age now holds the user's age 
C# 

int age - Convert .ToInt32 (Age .Text) ; // age now holds the user's age 

Note that in thiscase, thereisno need to accessa collection like Form as you saw with the 
Querystring Collection earlier. ASP.N ET shields you from the complexity of manually retrieving 
data from the submitted form, and instead populates the various controls in your page with the data 
from the form. 

All is well as long as users enter values that look I ike an age in the text box. But what happens when 
a user submits invalid data, either deliberately or by accident? W hat if a user sends the text I am 41 
instead of just the number 41? When that happens, thecodewill crash. TheToint32 method of the 
Convert class throws an exception (an error) when you pass it something that cannot be represented 
as a number. As soon as the exception is thrown, page execution stops completely. Chapter 18 digs 
deeper into exception handling. 

To avoid these problems, you need to validate all the data that is being sent to the server. When it 
doesn't look valid, you need to reject it and make sure your application deals with it gracefully. 


Validating User Input in Web Forms 

People concerned with validating user input often use the mantra: N ever trust user input. Although 
this may seem like paranoia at first, it is really important in any open system. Even if you think you 
know who your users are, and even if you trust them completely, they are often not the only users 
that can access your system. As soon as your site is out on the Internet, it's a potential target for 
malicious users and hackers who will try to find a way into your system. In addition to these evil 
visitors, even your trustworthy users may send incorrect data to your server by accident. 

To help you overcomethis problem as much as possible, ASP.N ET ships with a range of validation 
controlsthat help you validatedata before it is used in your application. In the following sections, 
you see how to use the standard validation controls to ensure the user submits valid data into the 
system. 


The ASP.NET Validation Controls 


ASP.N ET 4.5 comes with six useful controls to perform validation in 
your website. Five of them are used to perform the actual validation, 
whereas the final control — vaiidationsummary— is used to provide 
feedback to the user about any errors made in the page. Figure 9-1 
shows the available controls in the Validation category of the Tool box. 

The validation controls are extremely helpful in validating the data that 
a user enters in the system. They can easily be hooked to other controls 
like the TextBox or a DropDownList; however, they also support cus- 
tom validation scenarios. Figure 9-2 demonstrates two of the validation 

FIGURE 9-1 

controls— RequiredFieldValidator and RangeValidator— at WOrk 

to prevent a user from submitting the form without entering required and valid data. 
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http;//localhost;49194/Valic P - 2 -» 11 ;g localhost 



Your name 

1 am 41 
Send info 

1 Enter your name . 
1 Enter a number between 0 and 130 1 


FIGURE 9-2 


The great thing about the validation controls is that they can check the input at the client and at 
the server. W hen you add a validation control to a web page, the control renders] avaScript that 
validates the associated control at the client. This client-side validation worl<s on most modern web 
browsers with JavaScript enabled, including Internet Explorer, Firefox, Chrome, 0 pera, and Safari. 
At the same time, the validation is also carried out at the server automatically. This mal<es it easy to 
provide your user with immediate feed bacl< about the data using client-side scripts, while your web 
pages are safe from bogus data at the server. 

A Warning on Client-Side Validation 

Although client-side validation may seem enough to prevent users from sending invalid data to your 
system, you should never rely on it as the only solution to validation. It's easy to disable] avaScript 
in the browser, rendering the client-side validation routines useless. In addition, a malicious user can 
easily bypass the entire page in the browser and send information directly to the server, which will 
happily accept and process it if you don't tal<ecountermeasures. 

In general, you should see client-side validation asa courtesy to your users. It gives them immediate 
feedbacl< so they know they forgot to enter a required field, or entered incorrect data without a full 
postback to the server. Server-side validation, on theother hand, istheonly real means of valida- 
tion. It's effectively the only way to prevent invalid data from entering your system. 

The following section discusses how you can employ the validation controls to protect your data. 

Using the Validation Controls 

To declare a validation control in your ASPX page, you use the familiar declarative syntax. For 
example, to create the RequiredPieidvaiidator control used in Figure 9-2, you need the following 
code: 

<asp:RequiredFieldValidator ID="ReqVall" runat="server" ControlToValidate="YourName" 
ErrorMessage="Enter your name" /> 

The controiTovaiidate property links this validation control to another control (YourName in 
this example) in the page. When asked to perform its validation, the validation control looks at the 
value of the linked control and when that value doesn't meet the validation rules you set, it displays 
the message set in the ErrorMessage property by default although you can override this behavior as 
you'll see later. 
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To give you an idea of liow tlie vaiidation controis wori<, tliefoiiowing exercise guides you tiirougli 
tiie process of using tiieRequiredPieidvaiidator in a contact form tiiat is piaced in a user control. 
T lie exercise is followed by an in-depth discussion of the various validation controls. 


NOTE Visual Studio comes with a number of useful code snippets that enable 
you to quickly insert controls like the validation controls in l\/larkup View. In 
the following exercise, you see how to add the necessary controls using the 
Toolbox, Design View, and drag and drop, but it's useful to know how to quickly 
add controls in Markup View as well. For example, to insert a TextBox in Markup 
View, type tb or textbox and then press Tab. VS completes the full control 
code for you. To insert a RequiredFieidvaiidator, type the letters req, press 
Ctrl+Spacebar to have VS complete the word requiredf ieidvaiidator for you, 
and then press Tab again to insert the entire tag. 

If you do this directly below a TextBox control with its ID set, VS even sets the 
correct controiTovaiidate attribute for you. This latter trick wouldn't work if 
you tried it in the next exercise because the various controls are not directly 
next to each other, but are placed in separate table cells. VS still inserts 
the code for the RequiredFieidvaiidator for you, but you need to set the 
ControiTovaiidate property to the ID of the associated TextBox manually. 


TRY IT OUT 


Using the RequiredFieidvaiidator 


In this exercise, you create a user control called contactForm.ascx. You can place it in a web page so 
visitors to your sitecan leave some feedback. In later exercises, you extend the control by sending the 
response by e-mail to your e-mail account. 

1. Open the Planet Wrox project and add a new user control in the Contro Is folder. Call the control 
ContactForm.ascx. M al<e surethat it uses your programming language and a Code Behind file. 

2. Switch to Design View and insert a table by choosing Table c> Insert Table. Create a table with 
eight rows and three columns. 

3. M erge the three cells of the first row. To do this, select all three cells, right-clicl< the selection, and 
choose M odify o M erge Cells. 

4. In the merged cell, type some text that tells your users they can use the contact form to get in touch 
with you. You could use an hi element as a heading above the page to draw the user's attention. 

5. In the first cell of the second row, typetheword Name. Into the second cell of the same 
row, drag a TextBox and set its id to Name. Into the last cell of the same row, drag a 
RequiredFieidvaiidator from the Validation Category of theToolbox. Finally, into the second 
cell of the last row, drag a Button. Rename the button to sendButton by setting its id and set its 
Text property to send. When you're done, your Design View looks like Figure 9-3. 
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Get in touch with us 


Use the fonn below to get in touch with us. Enter your name, e-mail address, and your 
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FIGURE 9-3 


6. Click theRequiredFieidvaiidator oncein Design View and tfien open up its Properties Grid by 
pressing F4. Set tliefoiiowing properties on tlie controi: 


PROPERTY imm^^^^ 

VALUE 

CssClass 

ErrorMessage 

ErrorMessage 

Enter your name 

Text 

* 

Cont r o 1 ToVa 1 i da t e 

Name 


N ote: you can type in tlie vaiue for controiTovaiidate directiy or you can pici< it from tlie iist 
by ciici<ing tliedown arrow. 

7. Save tlie clianges to tlie user controi and tlien ciose it because you're done witli it for now. 

8. Add tliefoiiowing CSS declaration to tlie CSS files for both themes (Monochrome, ess and 

DarkGrey . ess): 

. ErrorMessage 
{ 

color: Red; 

} 

Save and close both files. 

9. Open Contact, aspx from the About folder in M arl<up View and from the Solution Explorer, drag 
the user control contactForm.ascx between thetags of the cpMaincontent control. You should 
end up with this control declaration: 

<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" runat=" Server "> 
<Wrox: ContactForm ID="ContactFonn" runat="server" /> 

</asp : Content > 
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Visual Studio remembers tlie iast custom prefix you used and reuses tliat w lien dragging tlie user 
controi onto tlie page. Depending on iiow you previously configured tiie Banner user control in 
web.conf ig, your Wrox: prefix may be different. That doesn't matter for this exercise. Also note, 
when you drag the control in Design View, its ID is contactFormi. For this exercise, the actual 
ID doesn't matter, but beware of the difference when worl<ing with the control ID later in this 
chapter. 

10. Open web.config and add or modify the following code under the <appsettings> element 
(which is a direct child of the main <conf iguration> node): 

<conf iguration> 
< appS e 1 1 ings > 

<add key="ValidationSettings lUnobtrusiveValidationMode" value="None" /> 
</appSettings> 

</conf iguration> 

Unobtrusive validation requires] Query, which is discussed in Chapter 11. Until then, you need to 
disable it or your pages with validation controls will throw errors. 

11. Save your changes and open contact .aspx in your browser. If you get an error, mal<esure 
you renamed the TextBox to Name and that you set the controiTovaiidate property on the 

RequiredFieldValidator tO Name. 

12. Leave the N ame text box empty and clicl< the Send button. N ote that the page is not submitted to 
the server. Instead, you should see a red asterisk appear at the very right of the row for the name 
field to indicate an error. If the asterisl< is not red, press Ctrl4f 5 or Ctrl+R to get a fresh copy of 
the theme's CSS file from the server and clicl< the Send button again. 

13. Enter your name and clicl< Send again. The page now successfully posts back to the server. 
How It Works 

W ith the RequiredFieldValidator attached tO the TextBox through the ControlToValidate prop- 
erty, client-side JavaScript is sent to the browser that validates the control at the client. 

The RequiredFieldValidator control isableto Validate another control like a TextBox. It does this 
by comparing the value of the other control with its own mitiaivaiue property and making sure that 
the other control's value is different. By default, this property is an empty string, which means that 
anything except an empty string is considered a valid value. W henever you try to submit the form to the 
server by clicking the Send button, the validation control checks the control it is attached to. W hen the 
text box is still empty, the asterisk from its Text property is shown (formatted with the ErrorMessage 
CSS class), and the form is not submitted. You see how to use and display the ErrorMessage property 
later in this chapter. W hen the user enters something in the Name text box, validation succeeds and the 
page submits to the server successfully. 


Using the HTML5 Data Types 

H TM L5 has introduced a number of new types for the type attribute on the input element. These 
new types enable you to determine how a browser should interpret the field so it can render a correct 
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user interface for it. ASP.N ET 4.5 supports tliese new attributes using tlieTextMode property of a 
TextBox controi. In addition to tlie singieLine, MultiLine, and Password types tliat liave been 
supported since ASP.N ET 1, you can now usetliefoiiowing vaiues as weii: 


VALUE 

DESCRIPTION 

Color 

Enables the user to choose a color, usually from a color picker. 

Date / DateTime / 
DateTimeLocal / Month / 
Week / Time 

Enables various ways for the user to enter a date or time. Depending 
on the type, the browser renders a calendar or other specialized con- 
trol to enter a value. 

Email 

Enables the user to enter an e-mail address. 

UrI 

Enables the user to enter a web address. 

Number 

Enables the user to enter a number. 

Range 

Enables the user to enter a number with a specified range. The 
browser typically draws a slider control to enter the value. 

Search 

Enables the user to enter a search term. This typically renders a stan- 
dard text box but with an option in the right corner to clear the text. 


Tliese server-side vaiues for tlieTextMode property are converted into dient-side H TM L attributes 
witli tlie same name, but written in iowercase. To see liow tliat iooi<s, consider tliis TextBox: 

<asp:TextBox runat= " server " ID="Email" TextMode="Email" /> 

W lien rendered in tlie browser, tliis controi generates tliefoiiowing HTML: 

<input name="Email" type="email" id="Email" /> 

Based on various vaiues for tlie type attribute, browsers can lieip tlie user enter tlie correct data by 
drawing a different user interfacefor tlie controi and by vaiidating tlie data tliat is entered. Also, 
devices with a "soft l<eyboard" — a keyboard that is displayed on-screen— are able to adapt the l<ey- 
board to match the data type for the input control. For example, Apple's i Pad shows a numeric l<ey- 
board if you put the focus on a text box with its type set to number. 

Although these new attribute values area great addition to H TM L, you need to be aware of a few 
caveats. First of all, with HTM L5 being so new, not all browsers support these new features. Figure9-4 
showseach of these attributes in thefivemost popular browsers today On thefirst row, you seelnternet 
Explorer 10, Firefox 14, and Chrome 21; and on the second row, you see Safari 5 and Opera 12. 

As you can see, some browsers support more of the attributes than others. At the time of writing. 
Opera and Safari have the best support. N otethat not all browsers implement these new types 
exactly the same. For example, in Firefox you'll get an error and you won't be able to submit the 
page if you enter a value that doesn't lool< lil<ean e-mail address in an input box with its type 
attribute set to email. 

Another thing you need to realize is that you should see these new attributes as helpful hints to 
the user only; you should never solely rely on them for validation purposes. It would be easy for a 
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malicious user to bypass tlie validation carried out by the browser. In addition, because browser 
support is still so limited, the validation won't be carried out for all fields in all browsers. 
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FIGURE 9-4 


Given the limited implementation of these new attributes in major browsers, you may wonder if it's 
worth using them in the first place. M y recommendation would be to use them, even though support 
is somewhat limited. First of all, new versions of browsers are released on a regular basis, bringing 
better H TM L5 support. In addition, other devices such as phones and tablets come to the marl<et 
with browsers that do have support for these attributes. Finally, using these attributes is pretty much 
risl<-free. The default type for an input element is text, so when a browser encounters a value it 
doesn't understand, it treats the element as a simple text box. 
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Because you can't rely on these H TM L5 attributes to validate your data, it's important that you use 
theASP.N ET validation controls. The next section discusses the remaining validation controls that 
areavailablein ASP.N ET. 

The Standard Validation Controls 

The five validation controls (the ones in the Validation category of theToolbox whose names end 
in Validator) Ultimately all inherit from the same base class, and thus share some common behav- 
ior. Four of the five validation controls operate in the same way, and contain built-in behavior that 
enables you to validate associated controls. The last control, the customvaiidator, enables you to 
write custom validation rules not supported out of the box. 


The following table lists a number of common properties that are shared by the validation controls 
and that you typically use when worl<ing with them. 


PROPERTY 

DESCRIPTION 

Display 

This property determines whether or not the hidden error message tal<es 
up space. With the Display set to static, the error message tal<es up 
screen real estate, even when it is hidden. This is similar to the CSS set- 
ting visibility: hidden you saw in earlier chapters. The Dynamic 
setting hides the error message using display: none until it needs to 
be displayed. With a setting of None, the control is not visible at all. This is 
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chapter. 

CssClass 

This property enables you to set the CSS class attribute that is applied to 
the error message text. 

ErrorMessage 

This property holds the error message used in the validationSummary 
control. When the Text property is empty, the ErrorMessage value is 
also used as the text that appears on the page. 

Text 

The Text property is used as the text that the validation control displays 
on the page. This could be an asterisk (*) to indicate an error, or text like 
"Enter your name." 

ControlToValidate 

This property contains the server ID of the control that needs to be 
validated. 

Enabled lent Script 

This property determines whether the control provides validation at the 
client. The default is True. 

SetFocusOnError 

This property determines whether client-side script gives the focus to the 
first control that generated an error. This setting is False by default. 
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PROPERTY DESCRIPTION 

validationGroup Validation controls can be grouped together, enabling you to perform 

validation against a selection of controls. All controls with the same 
ValidationGroup are checked at the same time, which means that 
controls that are not part of that group are not checked. Consider, for 
example, a login page with a Login button and fields for a username and 
password. The same page may also contain a search box that enables you 
to search the site. With the validationGroup, you can have the Login 
button validate the username and password boxes, whereas the Search 
button triggers validation for just the search box. 

isValid You don't typically set this property at design time, but at run time, it 

provides information about whether the validation test has passed. The 
Page class also has an isValid property that returns the combined result 
of all controls in the page or validation group, as you'll see later. 
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User name 
Password 


Login 


L 


• Enter your user name 

• Enter your password 


i 


FIGURE 9-5 


The Difference between the Text and ErrorMessage Properties 

At first glance, these two properties seem to serve the same 
purpose. Both of them can be used to provide feedbacl< to 
the user in the form of an error message. But when used in 
combination with a vaiidationsummary cohtrol, there's a 
subtle difference between the two. W hen you set both the 
properties at the sametime, the validation control displays 
the Text property, whereas the vaiidationsummary uses 
the ErrorMessage. Figure 9-5 shows a sample login page 

with two RequiredFieldValidator COhtrolS. Both Valida- 
tion controls have their Text property set to an asterisk (*) 
to give the user a visual cue that there is a problem. The 

Vaiidationsummary belOW theCOhtrol then displays the full ErrorMessage properties. 

You've already seen the RequiredFieidvaiidator at work, so the next sections give you a good 
look at the three remaining standard validation controls. A later section then shows you how to use 

the CustomValidator and the Vaiidationsummary COhtrolS. 

RangeValidator 

TheRangevaiidator cohtrol enables you to check whether a value falls within a certain range. 
The control is able to check data types like strings, numbers, dates, and currencies. For example, 
you can use it to make sure a number is between 1 and 10, a character between A and F, or a 
selected date falls between today and the next two weeks. The following table lists its most impor- 
tant properties. 
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PROPERTY 

DESCRIPTION 

MinimumValue 

This property determines the lowest acceptable value. For example, when 
checking an integer number between 1 and 10, you set this property to 1. 

MaximumValue 

This property determines the highest acceptable value. For example, when 
checking an integer number between 1 and 10, you set this property to 10. 

Type 

This property determines the data type that the validation control checks. 
This value can be set to string, integer, Double, Date, or Currency to 
check the respective data types. 


The following example shows a Rangevaiidator that ensures that the value entered in the Rate text 
box is a whole number that lies between 1 and 10: 

<asp : Rangevaiidator ID="RangeValidatorl" runat=" server" 

ControlToValidate="Rate" ErrorMessage="Enter a number between 1 and 10" 
MaximumValue="10" MinimumValue="l" Type=" Integer" /> 

RegularExpressionValidator 

The RegularExpressionValidator control enables you to check a value against a regular expres- 
sion that you set in the vaiidationExpression property of the control. Regular expressions offer 
a compact syntax that enables you to search for patterns in text strings. Regular expressions are a 
complex subject, but fortunately, Visual Studio comes with a few built-in expressions that make it 
easy to validate values likee-mail addresses and ZIP codes. If you want to learn more about regu- 
lar expressions, pick up a copy of Wrox's Beginning Regular Expressions by Andrew Watt (ISBN : 
978-0-7645-7489-4). 

The following example shows a RegularExpressionValidator control that ensuresthat a user 
enters a valuethat looks like an e-mail address: 

<asp: RegularExpressionValidator ID= "RegularExpressionValidator!" runat= "server" 
ControlToValidate="Email" ErrorMessage="Enter a valid e-mail address" 
ValidationExpression="\w+( [- + .'] \w+) *@\w+ ( [- .] \w+) *\.\w+ ( [-.] \w+) *" /> 

CompareValidator 

The CompareValidator Can be used to Compare the value of one control to another value. This is 
often used in sign-up forms where users have to enter a password twice to make sure they type the 
same password both times. Instead of comparing to another control, you can also compare against a 
constant value. 

The following table lists the additional properties for thecomparevaiidator control. 
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PROPERTY 

DESCRIPTION 

ControlToCompare 

This property contains the ID of the control that the validator compares 
against. When this property is set, ValueToCompare has no effect. 

Operator 

This property determines the type of compare operation. For example, 
when Operator is set to Equal, both controls must contain the same 
value for the validator to be considered valid. Similarly, you have 
options like NotEqual, GreaterThan, and GreaterThanEqual to 
perform different validation operations. 

Type 

This property determines the data type that the validation control 
checks. This value can be set to string, integer. Double, Date, or 
Currency to check the respective data types. 

ValueToCompare 

This property enables you to define a constant value to compare 
against. This is often used in agreements where you have to enter a 
word like Yes to indicate that you agree to some condition. Simply set 
the ValueToCompare to the word Yes and the ControlToValidate 
to the control you want to validate and you're done. When this prop- 
erty is set, make sure that the ControlToCompare property is empty 
because that will otherwise take precedence. 


This example shows a comparevaiidator that ensures that two TextBox controls contain the same 
password: 

<asp : Comparevaiidator ID="CompareValidatorl" runat=" server" 

ControlToCompare="ConfirmPas sword" ControlToValidate=" Password" 
ErrorMessage="Your passwords don't match" /> 

In the following exercise, you see most of these controls at work, except for theRangevaiidator. 
However, its usage is similar to the other validation controls, so it's just as easy to add it to your web 
page or user control when you need it. 


lljjymg^Q Extending the Contact Form 

In the previous Try It Out, you started with the basics for the contact form by creating a user control 
holding a table and a few controls to let users enter their name. In this exercise, you extend the form 
and add fields for an e-mail address, a home phone number, a business phone number, and a comment, 
You use the validation controls to ensure that the e-mail address is in a valid format, and that at least 
one of the two phone numbers is filled in. To mal<e sure users enter a correct e-mail address, they are 


324 I CHAPTER 9 VALIDATING USER INPUT 


asked to enter it twice. If you don't iil<e tliis beliavior, you can simpiy delete tlie row with the text box 
for the second e-mail address and ignore the comparevaiidator. 

1. Open contactForm.ascx from the Controls folder again and switch to Design View. 

2. In the second column, drag five additional Texteox controls in the empty table cells between the 
text box for the name and the Send button. From top to bottom, name the new controls by setting 
their ID as follows: 

^ EmailAddress 

Conf irmEmailAddress 

PhoneHome 

PhoneBusiness 
^ Comments 

3. Set the TextMode property of the comments control to MuitiLine, and then mal<e the control a 
little wider and taller in the designer so it's easier for a user to add a comment. 

4. Set the TextMode property of the two e-mail fields to Email. On browsers that support this, this 
will validate the value as an e-mail address and may trigger the correct "soft l<eyboard" to be 
displayed. 

5. In the first cell of the rows to which you added the Texteox controls, add text describing the pur- 
pose of the TextBox. Figure 9-6 shows an example. 

6. In the last cell of the row for the first e-mail address, drag a RequiredFieidvaiidator and a 
ReguiarExpressionvaiidator. In the last Cell of the row for the second e-mail address, drag a 
RequiredFieidvaiidator and a comparevaiidator. Finally, in the last Cell for the Comments 
row, drag a RequiredFieidvaiidator. W hen you're done, your form lool<s lil<e Figure 9-6. 


ContactForm.ascx* -0 X | 





Get in touch with us 

1 

Use the form below to get in touch with us. Enter your name, e-mail address, and your home or business phone number to get in 


touch with us. 



Name 



1 

E-mail address 

Re quire dFieldValidatorRegularExpre s sionValidator 


Repeat e-mail address 

Re quire dFieldValidator C omp are Validator 


Home phone number 



Business phone number 


1 

Comments 



Send 1 

V 

<l 

i> 


1 o Design | o Split | " Source | 



FIGURE 9-6 
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7. For each of the five validation controisyou added, open the Properties Grid and set the Text prop- 
erty to an asterisi< (*), the Display property to Dynamic, and the CssClass to ErrorMessage. To 

do this for aii controls at once, select the first validator control, then press the Ctrl key and clicl< 
the others. When you make changes to the Properties Grid while you've selected multiple controls, 
the changes are applied to all of them. 

8. N ext, set the remaining properties for the controls as shown in the following table. 


Control 

Properties You Need to Set 

Values You Need to Set 

RequiredFieldValidator (for 
the first e-mail address) 

ErrorMessage : 

Enter an e-mail address 


ControlToValidate : 

Ema i 1 Addr e s s 

RegularExpressionValidator 

ErrorMessage : 

Enter a valid e-mail address 


ControlToValidate : 

Ema i 1 Addr e s s 

RequiredFieldValidator (for 
the second e-mail address) 

ErrorMessage : 

Confirm the e-mail address 


ControlToValidate : 

Conf i rmEma i 1 Addr e s s 

CompareValidator 

ErrorMessage : 

The e-mail addresses don't 
match 


ControlToCompare : 

Ema i 1 Addr e s s 


ControlToValidate : 

Conf irmEmailAddress 

RequiredFieldValidator (for 
the Comments field) 

ErrorMessage : 

Enter a comment 


ControlToValidate: Comments 


10. 


still in Design View, click the 

RegularExpressionValidator Once, 

open its Properties Grid, and locate the 
vaiidationExpression property. When you click 
the property in the grid, the grid shows a button with 
an ellipsis. When you click that button, you get a 
dialog box that enables you to select a regular expres- 
sion, shown in Figure9-7. 

Scroll down in the list and then click Internet e-mail 
address from the list and note that VS inserts a long 


Regular Expression Editor 


Standard expressions: 


French phone number 
French postal code 
German phone number 
German postal code 


Validation expression: 


OK 


FIGURE 9-7 
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regular expression in tlie Vaiidation Expression box. Ciici< OK to add tlie property to tlie controi 
and dismiss tiiediaiog box. 

11. Saveaii the ciianges and tlien request tlie contact .aspx page from tiie About foider in your 

browser. If you get errors, mal<e sure you set all the controiTovaiidate properties on the relevant 
controls as shown earlier. Play around with the various validation controls by leaving out required 
data or by entering bogus data. At this stage, you will only seethe red asterisl<s appear to give an 
indication of the problem. After you have seen how these validators worl<, you learn how to use 
the vaiidationsummary to provide more detailed information to the user. 

Depending on your browser, you may see other notifications about invalid fields such as colored 
borders or tooltips explaining the problem. 0 nly when you have entered all required fields and 
typed the same e-mail address in both text boxes will the page submit to the server. 

How It Works 

J ust lil<e theRequiredFieidvaiidator control, the Other Validation controls emit JavaScript to the cli- 
ent, which is triggered when you clicl< the Send button or when the value of one of the client controls is 
changed. The comparevaiidator worl<s by lool<ing at the value of two different controls. Only when 
both contain the same data will it return true. It's important to realize that the comparevaiidator con- 
trol does not trigger its validation code when the text boxes are empty. Therefore, it's important to hool< 
up a RequiredFieidvaiidator control as Well. This control first mal<es sure the user entered at least 
some data and then the comparevaiidator control ensures that the text is the same in both text boxes. 

The ReguiarExpressionvaiidator control works by checl<ing the pattern of the data that it is validat- 
ing. If you look at the vaiidationExpression property of the control, you see a long, cryptic string. 
This pattern ensures that the e-mail address contains some text, optionally followed by some separa- 
tion character like a dash (-) or period, followed by more text. It also ensures that there's an @ symbol 
in the address, followed by a domain name, a period, and then at least one more character to represent 
the top-level domain like .com, .ni, or .co.uk. W ith this expression, you@exarapie.com is considered a 
valid e-mail address. So isa@a.a, whereas you@you isn't. 

N ote that the ReguiarExpressionvaiidator control Only roughly checks the Syntax of the e-mail 
address. It's still perfectly possibleto enter a nonexistent e-mail address that just looks valid or even an 
invalid e-mail address such as a@a.a. H owever, in many cases, this validator is good enough to filter 
out common typos that users make when entering e-mail addresses. 

If you look at the source for the page you see a lot of JavaScript code at the end of the file. With this 
code, ASP.N ET has implemented the client-side validation si nee the first version of ASP. N ET. H owever, 
starting with ASP.N ET 4.5, you now have another alternative that usesjOuery under the hood. You 
learn more about jO uery and the alternative validation mechanism in Chapter 11. 


The validation controls you have seen so far are very easy to use. You add them to a page, set a few 
properties, and then they do all the hard work for you. H owever, they do not support every pos- 
sible validation scenario you may come up with. For example, what if you wanted to ensure that a 
user entered at least one of the two phone numbers? And what if you wanted to present your users 
with a full list of all the errors they made in the form? This is where the customvaiidator and the 

ValidationSumraary COntrolS COme in. 
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The CustomValidator and ValidationSummary Controls 

The customvaiidator cohtrol enables you to writecustom validation functions for both the client 
(in JavaScript) and the server (using VB.N ET or C#). This gives you great flexibility with regard to 
the data you want to validate and the rules you want to apply. 

The ValidationSummary cohtrol provides the user with a list of errors that it retrieves from the 
individual validation control's ErrorMessage properties. It can display these errors in three different 
ways: using a list embedded in the page, using a JavaScript alert box, or using both at the same time. 
You control this setting with the showMessageBox and showsummary properties. Additionally, the 
DispiayMode property enables you to change the way the list of errors is presented. The default set- 
ting IsBuiietList where each error is an item in a bulleted list, but other options are List (without 

bullets) and SingleParagraph. 

You learn how to write client- and server-side validation methods and how to use the 

ValidationSummary cohtrol in the following exercise. 


||j|ym2^Q Writing Client- and Server-Side Validation Methods 

In this exercise, you see how to use the customvaiidator in your page to ensure that at least one of the 
two phone numbers is entered. The validation is carried out at the client and at the server. Additionally, 
you see how to usethevaiidationsummary cohtrol to provide feedbacl< to your users about the errors 
they made in the form. 


NOTE This is tiie first chapter where you'll actually write some JavaScript 
on your own. Don't worry about it too much because you won't have to write 
a whole lot of it. The examples should be pretty easy to follow, even if you 
don't have any prior experience with JavaScript. If you want to learn more 
about JavaScript, consider getting a copy of Professional JavaScript for Web 
Developers, 3rd Edition by Nicholas C. Zakas (Wrox, ISBN: 978-1-1180-2669-4). 


1. Go bacl< to the contactForm.ascx user control in VS and switch it to Design View. Right-clicl< 
the row with the Button control in it (right-clicl< a cell, not the button) and choose Insert o Row 
Below from the context menu to insert a new table row. Alternatively, you can click in a cell of the 
row to select it and then press Ctrl 4-Alt4down arrow to have the row inserted for you as well. 

2. Select the three cells of the row you just inserted, right-clicl< them, and choose M odify o M erge 
Cells to create a single cell that spans all three columns. 

3. From theValidation category of theToolbox, drag a vaiidationSummary control into this newly 

created cell and set its CssClass property to ErrorMessage. 

4. In the empty cell after the text box for the H ome phone number, drag a customvaiidator control 
and set the following properties: 
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PROPERTY 

VALUE 

CssClass 

ErrorMessage 

Display 

Dynamic 

ErrorMessage 

Enter your home or business plione number 

Text 

* 

ClientValidationFunction 

validatePlioneNumbers 


5. Double-click the customvaiidator cohtrol in Design View to have VS write an event handler for 
the servervaiidate eveht. Add the following code to the handler: 

VB.NET 

Protected Sub CustomValidatorl_ServerValidate (source As Object, 

args As ServerValidateEventArgs ) Handles CustomValidatorl . ServerValidate 
If Not String. IsNullOrEmpty(PhoneHome. Text) OrElse 

Not String. IsNullOrEmpty(PhoneBusiness. Text) Then 
args.IsValid = True 
Else 

args.IsValid = False 
End If 

End Sub 

C# 

protected void CustomValidatorl_ServerValidate {obj ect source, 
ServerValidateEventArgs args) 

{ 

if (! string. I sNullOrEmpty (PhoneHome .Text) || 

! string. IsNullOrEmpty (PhoneBusiness .Text) ) 

{ 

args.IsValid = true; 

} 

else 
{ 

args.IsValid = false; 

} 

} 

6. Switch to M arkup View of the user control and add the following block of JavaScript code right 
before the table with the controls: 

<script type="text/javascript"> 

function validatePhoneNumbers (source, args) 
{ 

var phoneHome = document .getElementByld (' <%= PhoneHome . ClientID %>'); 

var phoneBusiness = document . getElementByld (' <%= PhoneBusiness . ClientID %>'); 

if (phoneHome. value != '' | | phoneBusiness .value != '') 

{ 

args.IsValid = true; 

} 

else 
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{ 

args.IsValld = false; 

} 

} 

</script> 

<table class="auto-stylel " > 

In JavaScript, it's common to write metliod names using camel casing, where the first word of the 
method name is written in lowercase, followed by words with the first letter in uppercase. 

If you find that VS is adding your opening curly braces ({) at the end of a line, rather than on their 
own line, chooseToolso Options from the main menu. Then expand the path Text Editor o 
JavaScript o Formatting and checl< off both items in the N ew Lines category. This is purely a for- 
matting preference; theJavaScript runs fine with or without the curly brace on its own line. N ote 
that JavaScript iscase sensitive, so mal<e sure you type the code exactly as shown here. 

7. Save all the changes by pressing Ctrl+Shift+S, request the contact, aspx page in your browser, 
and clicl< the Send button. Also note that the vaiidationsummary control shows a list of all the 
problems with the data entered in the form. The client-sideJavaScript function vaiidatephone- 
Numbers now ensures that you enter at least one phone number before you can submit the page 
bacl< to the server. Figure 9-8 shows how the page appears in Google Chrome. 




" 1 — 1 ° E 


W □ Contact Us x \ 




<- -> G D localhost:49208/About/Ci_. it.a_t,.ii;.p:.; 



Get in touch with us 


A 

wroK,. 


Use the form below to get In touch with us- Enter your name, e-mail address, and your home or business phone 
number to get in touch with us. 


Name 


This 


E-mail address 


is a 


Repeat e-mail address 
Home phone number 
Business phone number 


sampie 
banner 


Comments 





• Enter your name 

• Enter an e-mail address 

• Confirm the e-mail address 

• Enter your home or business phone number 

• Enter a comment 




FIGURE 9-8 


8. Go back to VSand clicl< the vaiidationsummary control in Design View. On the Properties Grid, 
change showMessageBox to True and showsummary to False. (0 uicl< tip: you Can easily choose 
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9. 


the next item in a drop-down list on tlie Properties Grid by double-clicl<ing tlie value. For booleans, 
this means that if you double-clicl< False, it turns to True and vice versa). Also, set ItSHeaderText 
property to neBsecx)iTectthefiollovuingaTors. 

Open the page in the browser again and click the Send button once more. N otethat instead of the 
inline list with errors, you now get a client-side alert, shown in Figure 9-9. The list of errors is pre- 
ceded with the HeaderText Of the ValidationSummary. 



he page at localhost:49208 says: 

Please correct the following errors; 

- Enter your name 

- Enter an e-mail address 

- Confirm the e-mail address 

- Enter your home or business phone number 


- Enter a comment 


FIGURE 9-9 


How It Works 

W hen you added the customvaiidator control, you set up two event handlers, one for the client-side 
and one for the server-side validation check, both in bold in the following snippet: 

<asp : CustomValidator ID="CustomValidatorl" runat= "server" ErrorMessage=" Enter your 
home or business phone number" ClientValidationFunction="validatePhoneNuinbers" 
OnServerValidate=" CustomValidator IServerValidate" 

Display^ "Dynamic " >*</asp : CustomValidator> 

If you're using V B.N ET, you won't seethe onservervaiidate attribute because that is set up in the 
Code Behind using the Handles keyword. 

The JavaScript function validatePhoneNumbers that yOU set in the ClientValidationFunction iS 

triggered at the client when you click the Send button. Thisfunction isdefined in the markup section of 
the user control and contains two references to the text boxes for the phone numbers; 

var phoneHome - document . getElementByld (' <%= PhoneHome . ClientID %>'); 

var phoneBusiness = document .getElementByld (' <%= PhoneBusiness . ClientID %>'); 

The calls to the client id are wrapped in a server-side <%= %> block. This code runs at the server, and 
then returns the ciientiD of the control to the client. If you look at the H TM L for the Contact page in 
the browser, you find the following code: 

function validatePhoneNumbers ( source , args) 
{ 

var phoneHome - document . getElementByld (' cpMainContent_ContactForm_PhoneHome ') ; 
var phoneBusiness = 

document . getElementByld ( ' cpMainContent_ContactForm_PhoneBusiness ' ) ; 
if (phoneHome .value != ' ' | | phoneBusiness .value ' ') 
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H ere you can see how the server-side ciientiD properties of the controls have been transformed into 
their ciient id counterparts. This is a much better solution than hard-coding the id attributes of the 
text boxes in the final HTML, because they can be changed easily by the ASP.N ET run time. You saw 
how and why this happened in the preceding chapter. 

To makethe final JavaScript in the browser slightly shorter and easier to read, you can use the 
ciientiDMode property you saw in the preceding chapter to "fix" the IDs of the phone number con- 
trols. Because it's unlil<ely you will have two contactporm user controls in a single page, you can safely 
assume that you won't end up with two client controls with the same name if you fix the client control 
IDs. To do this, you need to set the ciientiDMode for these two controls to static, lil<e this: 

<asp:TextBox ID="PhoneHome" runat= " server " ClientIDMod6="Static" /> 
<asp:TextBox ID="PhoneBusiness" runat="server" ClientIDMode="Static" /> 

Because the control IDs are now fixed, they end up as-is in the final HTM L: 

var phoneHome = document . getElementByld {' PhoneHome ') ; 

var phoneBusiness = document . getElementByld (' PhoneBusiness ') ; 

Eventually, the client IDs are passed to theJavaScript function getEiementeyid on the document 
object to get a reference to their respective text boxes in JavaScript. In Chapter 11, which deals with 
jQ uery, I discuss an easier alternative to using getElementByld. The code then examines the value 
properties of these two TextBox controls. If one of them is not an empty string, the validation succeeds. 
But how does the vaiidatePhoneNumbers method report bacl< to the validation mechanism whether 
the validation succeeded or not? When theASP.N ET validation mechanism callsthe 
vaiidatePhoneNumbers method, it passestwo arguments: source, which is a reference to the actual 
customvaiidator in the HTM L, and args. Theargs object exposes an isvaiid property that enables 
you to determine whether or not the validation succeeded: 

if (phoneHome .value != ' ' | | phoneBusiness .value != ' ') 
{ 

args.IsValid = true; 

} 

else 
{ 

args.IsValid = false; 

} 

With this code, if both text boxes are empty, isvaiid is set to false, so validation won't succeed, stop- 
ping the form from being submitted. If at least one of the text boxes contains a value, isvaiid is set to 
true. In this example, the source argument is not used, but you could use it to highlight or otherwise 
change the validation control based on whether or not it's valid. 

At the server, the customvaiidator control calls the server-side validation method, which performs the 
samechecl<: 

VB.NET 

If Not String. IsNullOrEmpty{PhoneHome. Text) OrElse 

Not String. IsNullOrEmpty (PhoneBusiness . Text ) Then 
args.IsValid = True 
Else 
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args . IsValid = False 
End If 

C# 

if (! string . IsNullOrEmpty (PhoneHome . Text ) || 

! string . IsNullOrEmpty {PhoneBusiness . Text) 

{ 

args . IsValid = true; 

} 

else 
{ 

args. IsValid = false; 

} 

By checking the data at the client and at the server, you ensure your system accepts only valid data. 
Even when the browser doesn't support JavaScript (possibly because the user turned it off deliberately), 
your data is still checked at the server. H owever, it's important to realize that you still need to check 
whether the page is valid before you work with the data submitted to it. You do this by checking the 
IsValid property of the page: 

VB.NET 

If Page. IsValid Then 

' OK to proceed 
End if 

C# 

if (Page. IsValid) 
{ 

// OK to proceed 

} 

The IsValid property returns True when all the controls in the page or in the active vaiidationGroup 
are valid. By checking the isvaiid property on the server before you work with the data, you can be 
sure that the data isvaiid according to your validation controls, even if the user turned off JavaScript in 
the browser, and sent the form to the server without any client-side checks. You seethe isvaiid prop- 
erty used again later in this chapter, when sending e-mail is discussed. 


In addition to the validation controls you have seen so far, ASP.N ET comes with another validation 
mechanism, which is discussed next. 


Understanding Request Validation 

By design, an ASP.N ET pagethrowsan exception whenever one of the controls on a page contains 
content that looks like H TM L tags. For example, you see the error shown in Figure 9-10 when you 

enter <hl>Hello World</hl> or <script type=" text/javascript" >alert {'Hello World') ;</ 

script> as the contents for the comments text box in the contact form. 
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\^ Opera | 


^ D 1 ©Web 1 localhost;49194/AboutyContact.aspx *II5I^ Search with Google ] 

Server Error in '/' Application. 


A potentially dangerous Request. Form value was detected from the client 
(ctlOO$cpMainContent$ContactForm$Comments= "<hl> Hello World </hl > "). 

Description: ASP.NET has detected data in the request that is potentially dangerous because it might include HTML markup or script. The data might 
represent an attempt to compromise the security of your application, such as a cross-site scripting attack. If this type of input is appropriate in your 
application, you can include code in a web page to explicitly allow it. For more information, see http: //go. microsoft .com/fwlink/?LinkiD= 21 2874. 

EKception Details: System Web .HttpRequestValldationException: A potentially dangerous Request.Form value was detected from the client 
CctlOOJcpMainContentJ ContactFormJ Comments="<h1 >Hello World<Jh1 >") , 

III , 1 > 




FIGURE 9-10 


TheASP.N EI run time does this to prevent users from entering HTML or JavaScript that can 
potentially mess with the design or workings of your website or that could lead to security risks. If 
you're sure you want to allow your users to enter HTML, you have a few options available. First, 
you can disable request validation by setting the vaiidateRequest attribute in the® page directive 

to False: 

<%@ Page Inherits="Contact" Title="Contact Us" ValidateRequest="False" %> 

With this setting set to False, users can enter HTML without causing an error. In previous versions 
of ASP.N ET, this was the only way to enable a user to send H TM L to your page. The downside of 
this solution is that it's all or nothing. By turning off request validation at the page level, all controls 
in the page will now accept HTM L. This unnecessarily opens up your page for potential abuse. As 
a good security mechanism, you should allow HTM L only for specific fields that you determine 
explicitly 

Fortunately, ASP.N ET 4.5 now makes this very easy; the control class (from which classes such as 
TextBox inherit) has been extended with a vaiidateRequestMode property that controls the check 
for invalid data. When set to Enabled, the control does not accept HTM L; when set to Disabled 
the control does accept H TM L, similar to how vaiidateRequest enabled this for all controls in the 
page. The final value for vaiidateRequestMode is Inherit, which gives it the value set by the par- 
ent of the control such as a piaceHoider. This is convenient because you can wrap multiple controls 
that should accept H TM L in a piaceHoider and then configure the vaiidateRequestMode on the 
container instead of on each individual control. 

Before you set this property on a control, make sure you really want to allow users to submit HTML 
in your controls. This opens up your site for Cross Site Scripting attacks when you're not careful. 
Depending on the situation, you may need to sanitize the data by removing dangerous pieces of code 
such as <script> elements. When displaying the data on a page, you could use a Literal control, 
with its Mode set to Encode in Order for the H TM L to be encoded and rendered harmless. With this 
property set, the text is displayed verbatim, without being interpreted as H TM L or JavaScript. 
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PROCESSING DATA AT THE SERVER 

The information tliat a user inputs on your Web Forms is typically not the only data that mal<es 
your website an interactive, data-driven system. In most websites, you have information coming 
from other data sources as well, such as databases, text, XML files, and web services. In addition, 
there is also data going out of your system. You may want to send an e-mail to the owner of the 
website whenever someone posted information through the contact page, or you may want to notify 
people whenever you add a new feature or review to the website. For these scenarios, it's important 
to understand how ASP.N ET 4.5 enables you to send e-mail. This is discussed in the next section. 

Sending E-mail from Your Website 

Writing code that sends e-mail from an ASP.N ET page is pretty straightforward. Inside the system 
.Net .Mail namespaceyou find a number of classes that make it easy to create and send e-mail mes- 
sages. These classes enableyou to create new messages; add addressees in theTo, Cc, and Bcc fields; 
add attachments; and, of course, send the messages. 

The following table describes four classes that you typically work with when sending e-mail from a 


.N ET application. 

CLASS 


MailMessage 

This class represents the message you're going to send. It has properties such 
as Sub j act and Body to set the message contents; To, CC, and Bcc properties 
to set the addressees; and an Attachments collection to attach files to the 
message. 

MailAddress 

This class represents a sender or receiver address used in the e-mail. It has a 
few constructor overloads that enable you to set the e-mail address and dis- 
play name. 

Attachment 

This class represents a file you can attach to a MailMessage. When you con- 
struct an Attachment instance, you can pass in the name of the file you want 
to send. You then add the attachment to the MailMessage using the Add 
method of its Attachments collection. 

SmtpClient 

This class is used to send the actual message. By default, an instance of this 
class checks the web . conf ig file for settings such as the SMTP server (which 
stands for Simple Mail Transfer Protocol) to send the mail to and an optional 
username and password that is used for sending e-mail. 


Configuring Your Website for Sending E-mail 

Although the codeto send e-mail is pretty easy, configuring your application and network can 
often be a bit trickier. The machine you are using to send e-mail must be able to access an SM TP 
server, either available locally on your network or over the Internet. In most cases, you should use 
theSM TP server that you also use in your e-mail client (for example, M icrosoft 0 utiook). If you're 
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hosting your sitewith an external hosting party, you need to use the SM TP server it provides. 
Contact your networi< administrator or your ISP if you are unsure about your SM TP server. 

W hen you have the address of the SM TP server, you can configure it giobaiiy in the web.config fiie 
in the <system.net> dement. W hen you are using the SM TP server from your ISP, the configura- 
tion setting iool<s lil<ethis: 

<system.net> 

<mailSettings> 

<smtp deliveryMethod="Network" from="Your Name &lt;you(aexample . com &gt;"> 

<network host="smtp. example . com" /> 
</smtp> 
</mailSettings> 
</system.net> 

</conf iguration> 

You must add the <sys tem.net> element as a direct child of the web.config file's root element 
<conf iguration>. Within <system.net> you add a <mailSettings> element, which in turn con- 
tains an <smtp> element. Finally, the <network> element has a host attribute that points to your 
SM T P server. 

The <smtp> element accepts an optional from attribute that enables you to set the name and e-mail 
addressof the sender in the format Name <E-maii Address>. Because the angle brackets (< >) in 
XML have special meaning, you need to escapethem with &it; and &gt;. When you send e-mail 
programmatically, you can override this From address as you see in the next Try It Out exercise. 

If your ISP requires you to authenticate before you can send the e-mail or wants you to use a differ- 
ent port number, you can add this information to the <network /> element: 

<smtp deliveryMethod= "Network" from="Your Name Sclt ;youeexample . com S:gt;"> 
<network host= "smtp. example, com" userNaine="UserName" password="Password" 
port="587" /> 

</ smtp> 

The port number varies from server to server. In some cases, you can leave out the port attribute 
and the smtpciient will use the default port number (which is25). Other port numbers that are 
frequently used include 465 and 587. 

Some mail servers— I il<e the one supplied by Gmail— require you to use Secure Socl<ets Layer (SSL), 
a technique that encrypts the data going to the mail server to improve security. In ASP.N ET prior to 
version 4, you had to enable SSL programmatically in your own code. Fortunately, with the inclu- 
sion of the enabiessi attribute on the <network /> element, this is no longer the case. To use a 
Gmail server or any other mail server that requires SSL, you use a <network /> element that lool<s 
like this: 

<network enableSsl="true" host=" smtp . gmail . com" password=" Password" 
userName=" YourAccountiVameSg'mail . com" port = "S87" /> 

Don't forget to enter your password and username— which in the case of Gmail is your full G mail 
e-mail address. Depending on your settings, you may need to generate an application-specific pass- 
word, which you can do here: http://bit.iy/N9wv35. 
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For outiook.com (the former H otmail), you can use the following settings: 

<network host="smtp . live . com" password=" Password" 

userName= "you®yourdomain. com" enableSsl = "true" port="587" /> 

And for Yahoo, you can usethefollowing settings: 

<network host="smtp .mail . yahoo . com" password=" Password" 
userName=" YourAccountName(Syahoo . com" /> 

During development, there's a much easier way to handle mall sent by your application: drop It In 
a folder on your local hard drive directly. To do this, createa folder I Ike c:\TempMaii. You need to 
create the folder yourself because It won't be created automatically. Then configure the <smtp /> 
element as follows: 

<smtp deliveryMethod="Specif iedPickupDirectory" 

from="Planet Wrox Sclt ;planetwroxeexample . com&gt ; " > 
<specif iedPickupDirectory pickupDirectoryLocation="C: \TempMail" / > 
</smtp> 

With these settings In web.conf ig, your messages are not sent over the network, but are dropped as 
physical files (with an .emi extension) In the folder you configured In thepickupDirectoryLoca- 
tion attribute. You can read these files with mall clients like Outlook or Windows Live M all (which 
you can download from the Internet). I prefer this setting during development over the networked 
version because mall arrives Instantly, and doesn't clutter up my mall account or Inbox. Another 
alternative Is to use a fake development SM TP server such as smtp4dev. You can find out more 
about this program on their website at http://smtp4dev.codepiex.com. 

Refer to the online M SDN documentation at http://tinyuri.com/bu79nkm for more Information 
about the different settings that the <maiisettings> element takes. 


Creating E-mail Messages 

To create and send an e-mall message, you need to carry out four steps. First, you need to create an 
Instance of thenaiiMessage class. You then configure the message by adding a body and a subject. 
The next step Is to provide Information about the sender and receivers of the message, and finally, 
you need to create an Instance of the smtpciient class to send the message. Thefollowing exercise 
shows you how to code these four steps. 


||jjyHf2^Q Sending E-mail Messages 

In this exercise, you createa simplepagein the Demos folder. Thecodein thispage creates an e-mall 
message that Is sent when the page loads. In a later exercise, you modify the contact form so It can send 
the user's response by e-mall. 

1. Under the Demos folder, createa new file called Email .aspx. M ake sure It's based on your own 
base page template so that It has the right master page and Inherits from BasePage automatically. 

Change the page's Title to E-mall Demo. 

2. Switch to the Code Behind by pressing F7 and at the top of the file, before the class definition, add 
thefollowing statement to make the classes In the system. Net. Mail namespace avallableto your 
code: 
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VB.NET 

Imports System. Net .Mail 
C# 

using System. Net .Mail ; 

3. Add the following code to a page_Load handler. If you're using VB.N ET, you need to set up the 
handler first using the two drop-down lists at the top of the Document Window (or by double- 
clicl<ing the page in Design View): 

VB.NET 

Protected Sub Page_Load {sender As Object, e As EventArgs) Handles Me . Load 
Dim myMessage As MallMessage = New MailMessageO 
myMessage. Subject = "Test Message" 
myMessage. Body = "Hello world, from Planet Wrox" 

myMessage . From = New MailAddress ( "youOexample. com" , "Sender Name") 
myMessage. To. Add(New MailAddress ( "youOexample. com" , "Receiver Name")) 

Dim mySmtpClient As SmtpClient = New SmtpClientO 
mySmtpClient . Send (myMessage) 

End Sub 

C# 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

MallMessage myMessage = new MailMessageO; 
myMessage. Subject = "Test Message"; 
myMessage. Body = "Hello world, from Planet Wrox"; 
myMessage . From = new MailAddress ( "youOexample. com" , 
myMessage .To .Add (new MailAddress ( "you@example. com" , 

SmtpClient mySmtpClient = new SmtpClientO; 
mySmtpClient. Send (myMessage) ; 

} 

Change the e-mail addresses and names in the two lines that set the From and to addresses to 
your own. If you have only one e-mail address, you can use the same address for the sender and 
the receiver. 

4. Open web.config and right before the closing </conf iguration> tag, add the following settings: 

<system.net> 
<mailSettings> 

<smtp deliveryMethod= "Network" from="Your Name Stlt;you@example.com&gt; "> 

<network host="smtp. example. com" /> 
</smtp> 
</mailSettings> 
</system.net> 
</conf iguration> 

Don't forget to change smtp . example . com to the name of your SM TP server. Also, be sure to 
enter your name and e-mail address in the from attribute. If necessary, add theuserName, pass- 
word, enabiessi, and port attributes to the<network> element as shown earlier. 


"Sender Name" ) ; 
"Receiver Name")); 


338 I CHAPTER 9 VALIDATING USER INPUT 


If you're using Gmail, Outlook.com, or Yahoo, use the settings shown at the start of this section. 
Otherwise, checi< with your host for specific requirements concerning the port number when SSL 
is used; typicai port numbers inciude465 and 587. The source that comes with this bool< uses 
Specif iedPickupDirectory as the delivery method, which means you need to create a folder 
called c:\TempMaii in Order to send e-mail if you want to run that code. 

5. Save all changes, switch back to Email, aspx, and request it in your browser. After a while, you 
should receive an e-mail message at the address you specified in step 3 of this exercise or in your 
local pickup folder. 


COMMON MISTAKES If you get an error, you can check a couple of things. 
First, make sure you entered the right SMTP server in web . conf ig. You may 
need to talk to your Internet provider or network administrator to get the right 
address and, optionally, a username and password. Also make sure that the mail 
server you are using actually allows you to send messages. If you get an error 
such as "The SMTP server requires a secure connection or the client was not 
authenticated," your provider may require you to log in or to use SSL to secure 
the connection. If that's the case, check the username, password, and port num- 
ber in Web . conf ig Or try setting the enabieSsi attribute of the <network /> ele- 
ment as shown earlier. Different mail servers use different port numbers, so try 
out the listed port numbers or ask your host which port you should use. 


In some obscure cases, you may receive an error when the name of your development machine contains 
an underscore. In that case, you either need to rename the machine or usea different SM TP server. 

Another reason for problems could be a mismatch between your account name and the address you 
specify in the From property in the code. Some mail servers require these values to be identical. 

Finally, if you get the error "The specified string is not in the form required for an e-mail address," 
check if you entered a valid e-mail address in the from attribute in theweb.config file. You get this 
error if you leave out the @ symbol or make some other syntax error. 

If you can't make sending mails from your local machine work, you can always use the 
Specif IedPickupDirectory delivery Option to store the flles on your local machine. This way, you 
need to configure the mail server only when you deploy your website, and it gives you a quick, conve- 
nient solution during development. 

How It Works 

You added the following imports or using statement to the Code Behind file: 

VB.NET 

Imports System. Net .Mall 
C# 

using System. Net .Mall; 
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This statement is used to mai<e tlie dasses in tliis namespace avaiiabie in your code witiiout prefixing 
tiiem witii tiieir fuii namespace. Tliis enabiesyou, for exampie, to create a MaiiMessage instance 
iii<etliis: 

VB.NET 

Dim myMessage As MaiiMessage = New MaiiMessage ( ) 
C# 

MaiiMessage myMessage = new MaiiMessage {) ; 

Witiiout the Imports or using Statement, you wouid need tiiis ionger code instead: 

VB.NET 

Dim myMessage As System. Net .Mail .MaiiMessage = New System. Net .Mail .MaiiMessage ( ) 
C# 

System. Net .Mail .MaiiMessage myMessage = new System. Net .Mail . MaiiMessage () ; 
TiieCOdein Page_Load creates a new MaiiMessage object and sets its Subject and Body 

properties. Tlie code tlien assigns addresses for tiie sender and recipient of tliee-maii message: 

VB.NET 

myMessage . From = New MailAddress ( "youOexample . com" , "Sender Name") 
myMessage . To .Add (New MailAddress ( "youSexample . com" , "Receiver Name")) 

C# 

myMessage . From = new MailAddress ( "youOexample . com" , "Sender Name"); 
myMessage . To .Add (new MailAddress ( "youOexample . com" , "Receiver Name")); 

T lie From property of tiie MaiiMessage iS Of type MailAddress, SO yOU Can aSSign a new MailAddress 

directiy. Tlie constructor of tlie MailAddress dass accepts tlie e-maii address and friend iy name as 
strings, so you can create and assign tiieprom address witii a singieiineof code. 

TiieTo property of tiie MaiiMessage ciass is a collection, so you cannot assign a MailAddress instance 
directly. Instead, you need to use the Add method to assign an address. Thisalso enabiesyou to add 
multiple recipients by calling to. Add multipletimes, each time passing in a different MailAddress 
instance. You use the cc and bcc properties in a similar way to assign e-mail addresses to the carbon 
copy and blind carbon copy fidds of an e-mail message. 

The final two lines of the code send out the actual message: 

VB.NET 

Dim mySmtpClient As SmtpClient = New SmtpClientO 
mySmtpClient . Send (myMessage) 

C# 

SmtpClient mySmtpClient = new SmtpClientO; 
mySmtpClient . Send (myMessage) ; 

W hen the send method is called, the smtpciient scans the web. config file for a configured SM TP 
server or local drop folder. It then contacts that server and ddivers the message or saves it locally. 
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In the preceding Try It 0 ut exercise, tlie body text for tlie e-mail message is hard-coded. This isn't 
always the best solution because it means you need to scan and change your code whenever you 
want to change the text. It's often better to use a text-based template instead. You see how to do this 
in the next section. 

Reading from Text Files 

The .N ET Frameworl< comes with a few handy classes and methods that make working with files 
very easy. For example, the File class located in the system. lo namespace enables you to read 
from and write to files, create and delete files, and movefiles around on disk. This class contains 
only static methods, which meansyou don't have to create an instance of the class first. Instead, you 
call methods directly on the File class. For example, to read the complete contents of a text file, you 
can usethefollowing code: 

VB.NET 

Dim myContents As String = System. 10 . File . ReadAllText ( "C : \MyFile . txt" ) 
C# 

string myContents = System. 10 . File . ReadAllText {a"C : \MyFile . txt ") ; 

In this example, the filename in C#is prefixed with an @ symbol, to avoid the need to prefix each back- 
slash (\) with an additional backslash. In C#, the backslash hasa special meaning (it'sused to "escape" 
other characters that have a special meaning), so to use it in a string, you normally need to prefix it with 
another backslash. Using the® symbol tells the compiler that it should treat each backslash it finds as 
literal, ignoring the special meaning of the character. It also preserves any line breaks insidethe string. 

The following tablelists the most common methods of the File class that enableyou to work 


with files. 

METHOD ^mm^ 

VALUE iiiii^^^^^^^^^^^^^^^^^^iiiiiiiiiiiiiiiii^miiiim 

AppendAllText 

Appends a specified string to a text file. If the file does not exist, it's 
created first. 

Copy 

Copies a file from one location to another. 

Delete 

Deletes the specified file from disk. 

Exists 

Checks if the specified file exists on disk. 

Move 

Moves the specified file to a different location. 

ReadAllText 

Reads the contents of a text file. 

WriteAllText 

Writes the contents of a string to a new file and overwrites the target file 
if it already exists. 


You can use these methods for all kinds of purposes. For example, when a user has uploaded a file, 
you can use the Move method to move it to a different folder. Additionally, when you want to get rid 
of uploaded files that you don't need anymore, you use the Delete method. 
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TheReadAiiText method is useful to read the complete contents of a text file. For example, when 
sending text by e-mail, you could store the body text of the e-mail in a text file. W hen you're about 
to send the e-mail, you call ReadAiiText and assign the contents that this method returns to the 
body of the e-mail. You see how this worl<s in the following Try It 0 ut. 


TRY IT OUT 


Sending Mail from the ContactForm User Control 


This exercise shows you how to use e-mail to send the user data from the contact form to your own 
Inbox. As the body of the e-mail message, the code reads in a text file that contains placeholders. These 
placeholders are filled with the actual user data from the form. 

1. Start by adding a new text file to theApp_Data folder in your website. If you don't have the 
App_Data folder yet, right-clicl< the website and choose Add cAdd ASP.NET Folder oAppData. 
C reate the text file by right-clicl<ing the App_Data folder and choosing Add o Add N ew Item. Then 
select Text File, namethefilecontactForm.txt, and click Add. 

2. Enter the following text in the text file, including the placeholders wrapped in a pair of double hash 
symbols: 

Hi there, 


A user has left the following feedback at the site: 


Name : ##Name## 

E-mail address: ##Email## 

Home phone : ##HomePhone## 

Business phone: ##BusinessPhone## 

Comments: ##Comments## 

Save and close the file. 

3. Open the Code Behind of the contactporm.ascx user control and import the following 
namespaces (no need to type the comments) at the top of the file; 


VB.NET 

Imports System. 10 ' Provides access to the File class for reading the file 

Imports System. Net .Mail ' Provides access to the various mail related classes 


Partial Class Controls_Cont act Form 
Inherits System. Web. UI .UserControl 

C# 

using System. 10; // Provides access to the File class for reading the file 

using System. Net. Mail; // Provides access to the various mail related classes 

public partial class Controls_ContactForm : System. Web. UI .UserControl 

4. Switch to M arl<up View and add runat=" server " and id=" FormTabie" attributes to the table 
with the server controls. This way you can hide the entire table programmatically when the form 
has been submitted. To do this, locate the opening <tabie> tag and modify it lil<e this; 


<table class="auto-stylel" runat=" server" id=" FormTabie "> 
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5. Scroll down to the end of the file and right after the closing </tabie> tag, add a label called 
Message. Set its Text property to Message Sent. Hide the label by Setting the Visible property 

to false: 
</table> 

<asp:Label ID="Message" runat="server" Text="Message Sent" Visible="false" /> 

6. Switch the control into Design View and set showsummary of the vaiidationsummary bacl< to 
true and showMessageBox to false. Because these are the default values, VS removes the attri- 
butes from the marl<up completely. N ext, double-clicl< the Send button. Inside the event handler 
that VS adds for you, add the following code: 


VB.NET 

Protected Sub SendButton_Click (sender As Object, e As EventArgs) _ 
Handles SendButton. Click 
If Page.IsValid Then 

Dim fileName As String = Server .MapPath ( "-/App_Data/ContactForm. txt" 
Dim mailBody As String = File. ReadAllText (fileName) 


mailBody = mailBody . Replace ( "##Name##" , Name. Text) 
mailBody = mailBody . Replace ( "##Email##" , EmailAddress.Text) 
mailBody = mailBody . Replace ( "##HomePhone##" , PhoneHome.Text) 
mailBody = mailBody . Replace ( "##BusinessPhone##" , PhoneBusiness.Text) 
mailBody = mailBody . Replace ( "##Comments##" , Comments. Text) 


Dim myMessage As MailMessage = New MailMessage () 
myMes sage. Subject = "Response from web site" 
myMessage. Body = mailBody 

myMessage . From = New MailAddress ( "you@example. com" , "Sender Name") 
myMessage. To. Add(New MailAddress ( "you@example. com" , "Receiver Name")) 
myMessage. ReplyToList. Add (New MailAddress (EmailAddress . Text) ) 

Dim mySmtpClient As SmtpClient = New SmtpClientO 
mySmtpClient . Send (myMessage) 

Message. Visible = True 
FormTable .visible = False 
End If 

End Sub 

C# 

protected void SendButton_Click (object sender, EventArgs e) 
{ 

if (Page.IsValid) 
{ 

string fileName = Server. MapPath("-/App_Data/ContactForm. txt") ; 
string mailBody = File. ReadAllText (fileName) ; 


mailBody = mailBody . Replace ( "##Name##" , Name. Text); 
mailBody = mailBody . Replace ( "##Email##" , EmailAddress.Text); 
mailBody = mailBody . Replace ( "##HomePhone##" , PhoneHome.Text); 
mailBody = mailBody . Replace ( "##BusinessPhone##" , PhoneBusiness.Text) 
mailBody = mailBody . Replace ( "##Comments##" , Comments . Text) ; 
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MallMessage myMessage = new MallMessage () ; 
myMessage. Subject = "Response from web site"; 
myMessage. Body = mailBody; 

myMessage. From = new MailAddress ( "you@example .com" , "Sender Name"); 
myMessage. To. Add (new MailAddress ( "you@example .com" , "Receiver Name")); 
myMessage. ReplyToList.Add(new MailAddress (EmailAddress . Text) ) ; 

SmtpClient mySmtpClient = new SmtpClient () ; 
mySmtpClient. Send (myMessage) ; 

Message .Visible = true; 
FormTable. Visible = false; 


} 

} 

Again, makesureyou replace the e-mail addresses for the From and to properties of the 
MallMessage With your own. Also, the replace method is case sensitive so makesureyou type the 
placeholders exactly as how you wrote them in the text file. 

7. Save all your changes and once again request the contact .aspx page in the browser. Enter your 
details and click the Send button. You'll see the text M essage Sent appear. 

8. Check the e-mail account you sent the e-mail to (or look in the folder c:\TempMaii if you're drop- 
ping your mail on disk) and you should see an e-mail message similar to Figure 9-11. 


Response from web site 


0 Find text 

Junk Delete Reply Reply Forward Injtant Add to Move Copy Fl ^g Watch Previous Next 

all • message calendar to to aV E"C0ding 


Delete 


Respond 


Actions 


Response from web site 

Planet Wrox (info@planetwrox.corn) Add contact 
To: Planet Wrox; 


Hi there, 

A user has left the following feedback at the site: 

Name: Imar Spaanjaars 

E-mail address: imar@spaanjaars.com 
Home phone: 0800-123456 
Business phone: 0900-654321 
Comments: 

Great site! Thanks for posting that cool review about the new Oscar & the Wolf album the other day! 
Regards, 
Imar 



FIGURE 9-11 
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How It Works 

The mail-sending part of tliis exercise is pretty similar to the demo page you created earlier. W hat's 
different, however, is where the body text for the mail message comes from. Instead of hard-coding the 
body in the Code Behind of the contactForm control, you moved the text to a separate file. This file 
in turn contains a few placeholders that are replaced at run time with the user's details. To read in the 
entire fileat once, you use the following code: 

VB.NET 

Dim fileName As String = Server .MapPath (" ~/App_Data/ContactFortn. txt" ) 
Dim mailBody As String = File . ReadAllText (fileName) 

C# 

string fileName = Server .MapPath ( "~/App_Data/ContactForm. txt ") ; 
string mailBody = File . ReadAllText (fileName) ; 

The first line uses server. MapPath to translatea virtual path into its physical counterpart. By using 
the virtual path, it's easier to move your site to a different location because it doesn't depend on any 
hard-coded paths, server. Mappath("~/App_Data/contactForm. txt" ) retumsa physical path such as 

C:\BegASPNET\Site\App_Data\ContactForm.txt. ThiS path isthen fed tO the ReadAllText method 

of the File class, which opens the file and returns its contents, which are then assigned to the mail- 
Body variable. 


NOTE Reading this file every time you need it isn't very efficient. In Cfiapter 15, 
you see how to cache the contents of this file so you don't have to read it on 
every request. 


The code then uses a number of calls to the Replace method of the string class to replace the static 
placeholders in the message body with the details the user entered in the contact form. The return value 
of the Replace method— the new text with the replaced strings— is reassigned to the maiiBody vari- 
able. After the final call to Replace, themaiiBody no longer contains the placeholders, but the user's 
details instead; 

VB.NET 

mailBody = mailBody. Replace ( "##Name##" , Name. Text) 

mailBody = mailBody. Replace ( "##Comments##" , Comments . Text) 
C# 

mailBody = mailBody .Replace ( "##Name##" , Name. Text); 
mailBody = mailBody. Replace ( "##Comments##" , Comment s . Text ) ; 

The Replace method is case sensitive, so if you find that some placeholders are not replaced correctly, 
mal<e sure you used the same capitalization in the code and in the message body. 

The placeholders are wrapped in a pair of double hash symbols (##). The hash symbols are arbitrarily 
chosen, but help to identify the placeholders, minimizing the risl< that you accidentally replace some 
text that is supposed to be in the actual message. 
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0 nee the message body is set up, it's assigned to tlieBody property of tlieMaiiMessage object, wliicli is 
tlien sent using tiie smtpciient, identicai to wiiat you saw in an eariier exercise. 

You may liave noticed tiiecaii to tlie RepiyToList coiiection of tlieMaiiMessage instance. Tiiiscode 
adds tlie e-mail address that the user entered in the EmaiiAddress text box to the reply-to list of the 
mail message. This means that when you receive the message and want to reply to it, the reply gets sent 
to the user's address instead of to the From address you assigned to the message. This is especially use- 
ful in contact forms where users enter an e-mail address so you can directly reply to them. You may be 
tempted to assign the address the user entered to the From property directly, but you're advised not to 
do this. Some mail servers require this address to be your own and thus sending the mail may fail. Also, 
your message may be rejected when users enter an invalid address. By setting the From address to one 
of your own and adding the user's address to the RepiyToList, you create a reliable, yet convenient 
solution. 


W hen you filled in your details in the contact form and clicl<ed the Send button, you may have 
noticed some page flicl<er as the page submits to the server and is then reloaded with the success 
message. This pageflicl<er can easily be minimized or completely removed using Ajax technologies, 
which are discussed in the next chapter. 


PRACTICAL TIPS ON VALIDATING DATA 

The following list provides practical tips on validating data: 

>• Always validate all user input. Whenever you have a public website on the Internet, you lose 
the ability to control its users. To stop malicious users from entering bogus data in your sys- 
tem, always validate your users' input using the ASP. N ET validation controls. 

>■ Always provide useful error messages in your validation controls. Either assign the error mes- 
sage to the ErrorMessage property and leave the Text empty, or use a ValldationSummary 

control to show a list of error messages. 

>■ Consider using thecssciass attribute of the validation controlsto move the style definitions 
for the error messages to a separate CSS file instead of setting them directly on the validation 
controls. 

>• Whenever you are writing code that sends an e-mail message, consider moving the body of 
the e-mail to a separate text file stored in the App_Data folder because it mal<es your applica- 
tion much easier to maintain. 

>- When storing data in text or XM L files, always store them in the App_Data folder that is 
designed specifically for this purpose. This way, all your data files are nicely packed together. 
M ore importantly, by default the web server blocks access to the files in this folder so a visi- 
tor to your site cannot request them directly. 

>• When sending e-mails as a test, always send them to an existing and valid address. Even 
though an address like asdf ©test .com may appear to be invalid, there's a fair chance the 
account exists and is monitored, leading to the possible loss of sensitive data like passwords 
you may be sending through email. 
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>- Consider using specif iedPickupDirectory as tlie deiiveryMethod for SM TP maii dur- 
ing devdopment. It avoids tlie need to send messages over tlie networi<, resuiting in a faster 
response and a cieaner I nbox. 


SUMMARY 

User input is an important aspect of most interactive websites. Tlie input comes from different 
sources in your website: tlie contact form you created in tliis cliapter, tlie query string, and otiier 
sources. To stop users from entering invalid or even dangerous content into your system, it's impor- 
tant to validate all input before you worl< with it. 

The biggest benefit of the validation controls that ship with ASP.N ET 4.5 is that they worl< at the 
client and at the server, enabling you to create responsive forms where users get immediate feed bacl< 
about any errors they make, without the need for a full postbacl<. At the same time, the data is vali- 
dated at the server, ensuring that data coming from clients that don't useJavaScript is valid as well. 

To store the information that users submit to your site, you have a couple of options. The data can 
be stored in a database or a text file or sent by e-mail. The latter option is particularly useful for 
contact forms, so you get an immediate alert when someone leaves a comment at your website. 
Sending e-mail is a breeze with the classes in the system. Net. Mail namespace. These classes enable 
you to create an e-mail message, add subject, body, sender, and recipient information, and then send 
the message using the smtpciient class. 


EXERCISES 


1. To make the contactForm.ascx user control even more reusable, you can create a string prop- 
erty on It such as PageDescription that enables you to set the name of the page that uses the 
control. You can then add this string to the declaration of the control In the containing page. 
Finally, you can add the description to the subject of the message that you send. This way, you 
can see from which page the contact form was called. What code do you need to write to make 
this happen? 

2. Why is it so important that you check the value of the isvaiid property of the Page when pro- 
cessing data? What can happen if you forget to make this check? 

3. What's the difference in behavior between the To and the From property of the MaiiMessage 
class? 

4. When you use a Customvaiidator, you can write validation code at the client and at the server. 
How do you tell the ASP.NET run time what client-side validation method to call during the valida- 
tion process? 

5. How do you tell the validation mechanism that validation succeeded or failed in your 
Customvaiidator routines? 


You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 

Client-side validation Validation that takes place in the client's browser. Mainly serves as 

a courtesy to users and offers quick feedback. 

File class Contains methods that enable you to work with files, including 

reading and writing text files. 

A compact and flexible, albeit quite complex, syntax for finding 
strings of text in other strings. 

A method on the string class to replace one value in a string 
with another. 


Regular expressions 
Replace method 


Server-side validation Validation that takes place at the server. You always need server- 

side validation to protect your data because client-side validation 
can be bypassed. 

SMTP Server A server responsible for accepting and delivering e-mail. 


SSL A technique to encrypt (and thus protect) data flowing between 

two machines. 

System. Net .Mail The namespace for e-mail classes such as MailMessage, 

namespace MailAddress, and SmtpClient. 


Validation controls 


A set of ASP.NET Server Controls that enable you to validate user 
input at the client and at the server. 


ASP.NET A J AX 


WHAT YOU WILL LEARN IN THIS CHAPTER: 


>• Using the updatePanei control to avoid page flicker 

>" Understanding the scriptManager control that enables the Ajax 
functionality 

>• Using the updateProgress control to notify users about progress of 
an Ajax operation 

> Creating WCF services and page methods that are accessible by 
your client-side script 

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 

www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the Chapter 10 download. 

Over the past few years, Ajax has popularized itself immensely in the web development com- 
munity. Although the technology that drives Ajax has been around for quite some time, 
it wasn't until the beginning of 2005 that it got an official name. Ajax, which stands for 
Asynchronous] avaScript And XML, enables your client-side web pages to exchange data 
with the server through asynchronous calls, which means they don't block the user interface 
while running. Probably the most popular feature driven by Ajax is the flicker-free page that 
enables you to perform a postback to the server without refreshing the entire page. N ote 
that the term Ajax doesn't really cover the underlying technology anymore. Asynchronous 
JavaScript is still used to make the calls, but in many situations XML as the data format has 
been replaced with J SON , as you see later in this chapter. 

To enhance your website with Ajax features you can choose among different Ajax frame- 
works. In earlier versions of Visual Studio and ASP.N ET, M icrosoft shipped both a server-side 
framework as well as a client-side script library for Ajax interactions. This client-side script 


350 I CHAPTER 10 ASP.NET AJAX 


library— while still present in ASP.N ET 4.5— is no longer the recommended solution. Instead, you're 
encouraged to usejQuery, which is discussed in detail in the next chapter. 

The server-side part of M icrosoft ASP.N ET AJAX gives you a lot more than flicl<er-free postbacks. 
In addition to the controls that make flicl<er-free pages possible, M icrosoft ASP.N ET AJAX gives 
you a few more server controls to create rich, interactive, and responsive user interfaces. 

THE CORRECT SPELLING OF AJAX 


You'll come across two different spellings of Ajax: using Pascal casing, or in all 
caps. I'll usetheterm Ajax when referring to thegeneral concept, and I'll useASP 
.N ET AJAX when specifically referring to M icrosoft's Ajax framework. 


By the end of the chapter, you should have a good understanding of the various server controls that 
theASP.N ET AJAX Framework has to offer. You will also have a basic understanding of creat- 
ing WCF Services and page methods using ASP.N ET and how you can call them from client-side 
JavaScript code. 

INTRODUCING AJAX 

in the first chapter of this book you learned how browsers interact with the server. The browser makes 
a request for a page using get or post, as you've seen in Chapter 4 and Chapter 9. The server processes 
that page and sends back the resulting HTM L. The browser then parses that HTML and renders the 
page to the user, optionally downloading any external resources like images, script files, and cascading 
stylesheets (CSS). W hen a user interacts with the page (for example, by clicking a button to submit a 
filled-in contact form) the page is posted back to the server, after which the entire page is loaded in the 
browser again. The left-hand side of Figure 10-1 shows a visual representation of this process. 


Traditional Page Processing Ajax Page Processing 



Browser Browser 


FIGURE 10-1 
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Even though this model has been used for years to serve web pages, it has a few big drawbacl<s. First, 
because the entire page is ioaded after a postbaci<, the H TM L sent to the browser is much iarger than 
it needs to be. Thini< baci< to the contact form you created in the previous chapter. Right after the user 
has submitted the contact form, the server shows a Label control with the text M essageSent. It does 
that by fully loading a new page that hides the form controls and shows the message. Even though the 
rest of the page hasn't changed (the menu, the sidebar, the footer, and so on), they are still sent from 
the server to the client. Ideally, you would only want to send bacl< theHTM L that has changed. In the 
case of the contact form, that could be as little as the text M essageSent. The right-hand sideof 
Figure 10-1 shows how thisworl<s. Rather than sending the entire page as a response, the server 
sends a partial response (containing little more than the text M essageSent), which is then used by the 
browser to update just the part of the page that has changed, leaving the rest of the page as it was. 

The second drawback of a full page reload has to do with the way the browser renders the page. 
Because the entire page is replaced, the browser has to dismiss the old one and then draw the new 
one. This causes the page to "flicl<er," which results in an unattractive user experience. You can 
deploy Ajax techniques to overcome these two problems, as you see in the remainder of this chapter. 

The concepts behind Ajax have been around for many years. Browsers since Internet Explorer 5 
have shipped with thexMLHttpRequest object that enabled you to make callsto theserver from 
JavaScript to send and receive data. However, people also used other techniques to emulate the 
behavior of what is now called Ajax, including M acromedia Flash, iframe elements, or hidden 
frames. 

H owever, when the term Ajax was introduced, things really took off. In an attempt to stay ahead of 
the curve, M icrosoft started building ASP.N ET AJAX , the Ajax framework that is now fully inte- 
grated in ASP.N ET and Visual Studio 2012. Thisframework offers a number of benefits that you as 
a web developer can take advantage of to create responsive applications. 

In particular, ASP.N ET AJAX enables you to: 

>■ Create flicker-free pages that enable you to refresh portions of the page without a full reload 
and without affecting other parts of the page 

Provide feedback to your users during these page refreshes 

>- Update sections of a page and call server-side code on a scheduled basis using a timer 

>" Access server-side WCF services and page methods and work with the data they return 

The nice thing about ASP.N ET AJAX is that it is very easy to get started with. Creating a flicker- 
free page is a matter of dragging and dropping a few controls from theToolbox onto your page. 
When you understand the basics of the Ajax framework, you can extend your knowledge by looking 
at more advanced topics such as calling WCF services. 


USING ASP.NET AJAX IN YOUR PROJECTS 


ASP.N ET AJAX is fully integrated in ASP.N ET and VS, which means you can start using it right 
away. Each new ASP.N ET 4.5 web project you create in VS is already Ajax-enabled. In addition, the 
Toolbox contains an AJAX Extensions category with a number of Ajax-related controls that you can 
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use in your pages. Visual Studio also has great support for ASP.N ET AJAX , giving you IntelliSense 
for the controls at the server as well as for the client-side JavaScript you'll write to interact with the 
client page and code running on the server. 


Creating Flicker-Free Pages 

To avoid full postbacl<s in your ASPX pages and update only part of the 
page, you can usetheupdatepanei server control. For this control to oper- 
ate correctly, you also need a scriptManager control. If you're going to 
use Ajax functionality in many of your ASPX pages, you can place the 
ScriptManager in the master page, so it's available in all pages that are 
based on this master. You can have only one scriptManager per page, so if 
you add one to a master page, you can't add another one to a content page. 
To access a scriptManager control that is defined in a master page from a 
content page, you can usethescriptManagerProxy control as explained 
later. You'll find these and other Ajax-related server controls in the AJAX 
Extensions category of the Toolbox, shown in Figure 10-2. 


Search Toolbox 


.< AJAX Extensions | 


Pointer 

!? 

ScriptManager 


ScriptManagerProxy 

o 

Timer 

a 

UpdatePanel 


UpdateProgress 


FIGURE 10-2 


The following two sections introduce you to theupdatePanei and scriptManager controls. 
After the introduction you see how to make use of these controls in the pages in your Planet Wrox 

website. Later sections introduce you to theupdateProgress, Timer, and ScriptManagerProxy 

controls. 


The UpdatePanel Control 

TheupdatePanei control is a l<ey component in creating flicl<er-free pages. In its most basic applica- 
tion, you simply wrap the control around content you want to update, add a scriptManager to the 
page, and you're done. W henever one of the controls within theupdatePanei causes a postback to 
the server, only the content within that updatePanei is refreshed. 

To see what problems theupdatePanei control solves and how it behaves in a client page, the fol- 
lowing Try It 0 ut shows a simple example that uses the panel to avoid page flicker during postbacks. 


TRY IT OUT 


Adding an UpdatePanel to a Page 


In this exercise, you add a Label and a Button control to a page. W hen you click the button in the 
browser, the Text property of the Label is updated with the current date and time at the server. 
To avoid the page flicker typically associated with postbacks, you then wrap the controls in an 
UpdatePanel to See how that control affects the behavior. 

1. Open the Planet Wrox website in Visual Studio. 

2. In the Demos folder, create a new Web Form called updatepanei .aspx using your custom tem- 
plate. G ive the page a Title of UpdatePanel Demo. 

3. Switch the new page into Design View and drag a Label control and a Button control from the 
Toolbox into the cpMaincontent placeholder. If the contentpiaceHoider Suddenly gets as small 
as the Label, simply drop the Button on top of the Label. The Button is then placed before the 
Label but if you now drag the Label on top of the Button again, the two change places. 
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4. Use the Properties Grid to clear tliexext property of tlie Label control. To do this, right-click the 
Text property label in the Properties Grid and choose Reset. 

5. Double-clicl< the gray and read-only area of the page in Design View to set up a handler for its 
Load event and add the following code to the handler that VS added for you: 

VB.NET 

Protected Sub Page_Load{ sender As Object, e As EventArgs) Handles Me. Load 
Labell.Text = System. DateTime .Now. ToString () 

End Sub 

C# 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

Labell.Text = System. DateTime .Now. ToString () ; 

} 

6. Save all your changes and press Ctrl4f 5 to open the page in your browser. The Label displays the 
current date and time. Clicl< the Button control a few times. N ote that each time you clicl< the but- 
ton, the pageflicl<ers and is then redrawn, displaying the updated date and time. N ow tal<e a lool< 
at the HTM L that is used by the browser (right-clicl< the page in the browser and choose View 
Source or View Page Source). N otice how the page contains a <span> element with the date and 
time that was sent from the server. 

7. Close your browser, go bacl< into VS, and switch theupdatePanei .aspx page to M arkup View. 
M ake some room right before the Label control, and then type updatepanei and press Tab. VS 
inserts the code for an updatePanei and a <contentTempiate> for you. 

8. N ext, cut both the closing </contentTempiate> and the closing </updatePanei> tags and paste 
them below the button you created in step 3. Y ou should end up with this markup: 

<asp : UpdatePanei runat= " server" > 
<ContentTemplate> 

<asp:Label ID="Labell" runat="server" ></asp : Label> 
<asp:Button ID="Buttonl" runat=" server" Text="Button" /> 
</ContentTemplate> 
</asp:UpdatePanel> 

9. Right before the opening tag of theupdatePanei, drag a scriptManager from theAJAX 
Extensions category of the Toolbox. Alternatively, type sm followed by the Tab key to insert 
the ScriptManager using a code Snippet. Y our code should look similar to this (although your 
ScriptManager may lack the ID attribute and may use a self-closing element when you use a code 
snippet): 

<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" runat= " Server" > 
<asp: ScriptManager ID="ScriptManagerl" runat=" server ">< /asp : Scrip tManager> 

<asp : UpdatePanei ID="UpdatePanell" runat=" server "> 

10. Save your changes and request the page in the browser again. Click the button a few times to 
update the label with the current date and time. N ote that there is no page flicker now, and only 
the label is updated on the page. If you look at the source in the browser again, you seethe <span> 
element that contains the date and time of the very first request. The updates to the label that were 
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added by clicking tlie button are not a part of tlie H TM L source because tliey iiave been added 
dynamicaiiy by tlieASP.N ET AJAX Framewori< to tiie browser's internal HTM L. 

How It Works 

By wrapping tlie content in an updatePanei you define a region in your pagetiiat you want to refresii 
witiiout affecting tiie entire page. In the example, the Button control inside the updatepanei caused a 
postbacl< and thus a refresh of just the region in which the control is defined. Rather than replacing the 
entire page, only the part of the page that is wrapped in the updatepanei is refreshed, causing a flicl<er- 
free reload of the page. 

If you analyze the data that gets sent from the server to the browser (using a networl< analysis tool lil<e 
Fiddler, which you can download from www.f iddier2 .com/f iddier2/), you would see that only a lim- 
ited amount of data gets sent to the client. Rather than the full page (weighing around 12KB), only the 
following data is sent: 

1 1 # I I 4 I 232 I updatePanei | cpMainContent_ctlOO | 

<span id="cpMainContent_Labell" >4/9/2012 11:56:09 AM</span> 

<input type=" submit" name="ctlOO$cpMainContent$Buttonl" value= "Button" 

id="cpMainContent_Buttonl" class="MyButton" style="background-color : #7A70A4 ; " /> 

I 0 |hiddenField| EVENTTARGET | | 0 | hiddenField | EVENTARGUMENT | | 0 | hiddenField | 

LASTFOCUS I I 1624 I hiddenField I VIEWSTATE| lAtsytnBlusXShf T92FZnRf hkyw7616Tf ovQaG 

Demo 1 184 I scriptBlock | ScriptPath | /ScriptResource . axd?d=zvkqIRNUspAvSlyKeFhMb_LRgBPQ 
LrZDpLmd71civkClsZ5csFf ISkT- 

klNurvxrEjhFFVa7dJqUQpcX913wMJNiJeY5DJdOF5sqxTU0JGDbsEuI_njxenny6ggiBtc 
4vOKR16h2V2npds3RA8dURw2&t=57d51992 | 

N ote that I cut out a big piece of content including much of the View State of the page from the middle 
(represented by the three dots) to save some space in this bool<. If you lool< at this response, you'll 
recognize the H TM L for the updated Label and the Button; the two controls that have been defined 
within the <contentTempiate> of the UpdatePanei control. The remaining text is used by the ASP 

.N ET AJAX Frameworl< to maintain page state (using the viewstate field) and to understand 

whereto place the response in the page. Even though a lot of data still gets sent down the wire, it's 
far less than the original full page of around 12KB. This results in a faster response and a better user 
experience. 

W hen you looked at the source of the page in the browser in step 10 you may have noticed that the page 
still contained theoriginal source, not the updated source modified by theASP.N ET AJAX Framework. 
This sometimes makes it difficult to build, test, and debug Ajax applications because you cannot 
really see what data gets sent to the browser. Fortunately, many tools are availablethat help with 
this. Besides the aforementioned Fiddler tool, you're advised to take a look at the M icrosoft Internet 
Explorer Developer Toolbar. It ships with Internet Explorer 8 and later and is accessible through the 
Tools o Developer Tools menu option. 

Another great tool for debugging is Firebug, which integrates nicely with the Firefox browser. You can 
get the tool at http://getfirebug.com. G oogle's C hrome has a similar tool that you can open by 
clicking the Wrench icon and then choosing Tools o Developer tools. 


Using ASP.NET AJAX in Your Projects | 355 


In this exercise, you used two important AJAX Extensions controls. T lie scriptManager—tliat 
you placed in updatepanei .aspx directly in this exercise— is a requirement for most Ajax func- 
tionality in an ASPX page to operate correctly. It serves as the bridge between the client page and 
the M icrosoft ASP.N ET AJAX Frameworl< and takes care of things lil<e registering the correct 
JavaScript files that are used in the browser. TheupdatePanei isthen used to define regions you 
want to update without reloading the entire page. You see both controls in more detail in the follow- 
ing sections. 

A Closer Look at the UpdatePanel 

TheupdatePanei and its Content istheonly part of the page that isupdated when you clicl< a but- 
ton (as discussed in the previous exercise). This is the default behavior of an updatepanei, where 
only its inner contents are refreshed by other server controls defined within the <contentTempiate> 
element. However, theupdatePanei can do more than this, as you see in the next section. 


Common UpdatePanel Properties 

The following table lists some of the important properties of theupdatePanei that enableyou to 
influence its behavior. 


PROPERTY 

DESCRIPTION 

ChildrenAsTriggers 

This property determines whether controls located within the 

TTndfltePanel ran raii'=;p rpfrp*^h of tPie TTndatePanel TPiP riefriiilt 

>-) ^J\JlOl l^C^CLllCX ^Cll 1 ^OL^ 3^ O 1 ^ 1 1 1 1 \J 1 L 1 1 ^ l-l L-iV^CL l^C^CLllCX. 1 II ^ \A \^ 1 d U 1 L 

value is True, as you saw in the previous exercise. When you set this 
value to False, you have to set the UpdateMode to Conditional. Note 
that controls defined within the UpdatePanel still cause a postback to 
the server with this property set to False; they just don't update the 
panel automatically anymore. 

Triggers 

The Triggers collection contains PostBackTrigger and 
AsyncPostBackTrigger elements. The first is useful if you want to 
force a complete page refresh, whereas the latter is useful if you want to 
update an UpdatePanel with a control that is defined outside the panel. 

RenderMode 

You can set this property to Block (the default) or inline to indicate 
whether the UpdatePanel renders itself as a <div> or <span> element. 

UpdateMode 

This property determines whether the control is always refreshed (the 
UpdateMode is set to Always) or only under certain conditions, for 
example, when one of the controls defined in the <Triggers> element is 
causing a postback (the UpdateMode is set to Conditional). The default 
for this setting is Always. 

ContentTemplate 

Although not visible in the Properties Grid for the UpdatePanel, the 
<ContentTemplate> is an important property of the UpdatePanel. 
It's the container in which you place controls as children of the 
UpdatePanel. If you forget this required ContentTemplate, VS gives 
you a warning. 
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You see more of theupdatepanei in later exercises in tliis cliapter. 
UpdatePanel Caveats 

As useful as the UpdatePanel seems (and is), its usage comes at a price. Although it appears as if 
only part of the page is refreshed, the entire page (and all of its form data) is still posted bacl< to the 
server. Atthe server, the page still goes through its normal lifecycleand then sendsback theHTM L 
that is needed to update the page. H owever, the data that is sent bacl< isn't in a very optimal format 
because it contains some overhead data (required by ASP.N ET AJAX to understand how to interpret 
it). This means that the UpdatePanel carries some overhead in terms of form posts, page processing, 
and networl< traffic. Later in this chapter, you see some ways to get data to and from the server from 
client-side code that minimize this overhead. 

As demonstrated in the previous exercise, theupdatepanei control is capable of refreshing parts of 
a page. Controls that are defined either inside theupdatepanei or outside of it can cause a refresh 
of the UpdatePanel. H owever, in order to function, theupdatepanei needs a scriptManager con- 
trol that manages the client-side JavaScript, among other things. 

The ScriptManager Control 

The ScriptManager control serves as the bridge between the client page and the server. It manages 
script resources (theJavaScript files used at the client), tal<es care of partial-page updates as shown 
earlier, and handles interaction with your website for things lil<eWCF services. 

You usually place the scriptManager control directly in a content page if you thinl< you need Ajax 
capabilities on only a handful of pages. You briefly saw how this worl<ed in the previous Try It Out 
exercise. However, you can also place the scriptManager in a master page so it becomes available 
throughout the entire site. You do this in a later exercise in this chapter. 

The ScriptManager class has a number of properties, of which most are used in advanced sce- 
narios. In many situations, lil<e updating sections of a page using theupdatepanei as you just saw, 
you don't need to change any of the properties of the scriptManager class. I n other scenarios, you 
may need to change or set some of its properties. The following table lists some of the more common 
properties of the scriptManager control. 


PROPERTY 

DESCRIPTION 

AllowCustoraErrorsRedirect 

This property determines whether errors that occur during an 
Ajax operation cause the customized error page to be loaded. 
The default is True; with a setting of False, the error is shown 
as a JavaScript alert window in the browser or is hidden from the 
client when debugging is disabled. Note that if you haven't con- 
figured any customized error page, the error is always shown as 
a JavaScript alert, regardless of the value of this setting. 
Chapter 18 talks more about setting up customized error pages 
and debugging your application. 
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PROPERTY 

DESCRIPTION 

AsyncPostBackErrorMessage 

When you're not using customized error pages, tliis property 
enables you to customize tlie error message that users see 
when an Ajax error occurs. It enables you to hide the dirty details 
from the users and instead present them a more friendly error 
message. 

EnablePageMethods 

This property determines whether client code is allowed to call 
methods defined in the page. You see how this works later. 

EnablePartialRendering 

This property determines whether the ScriptManager supports 
the partial rendering of the page using UpdatePanel controls. 
You should leave this setting to True, unless you want to block 
the partial updates for the entire page. 

EnableCdn 

With this property set to True, ASP.NET includes links to the 
client-side framework files on Microsoft's Content Delivery 
Network, rather than on your own server. This saves you some 
bandwidth and speeds up the initial load of the page if the user 
already had a cached copy of the files from visiting another site 
using these files. 

Aj axFrameworkMode 

Determines whether the Microsoft AJAX client library is included. 
This setting enables you to use the ScriptManager for server- 
related tasks {like registering client scripts) without embedding 
the client-side framework in the page. 

Scripts 

The <Scripts> child element of the ScriptManager control 
enables you to add additional JavaScript files that must be 
downloaded by the client at run time. 

Compos iteScript 

Just like the <Scripts> element, the <CompositeScript> ele- 
ment enables you to add additional JavaScript files. However, 
files registered under <CompositeScript> are combined into 
a single, downloadable file, minimizing network overhead and 
improving performance. 

Services 

The <Services> element enables you to define WCF services 
that are accessible by your client-side pages. You see how to 
use WCF services in the second half of this chapter. 


Although theupdatePanei and the ScriptManager together are all you need to create flicker-free 
pages, ASP.N ET AJAX offers more to enhance the user's experience in an Ajax-enabled website. 
0 ne way to improve the user's experience is by using theupdateprogress control, discussed next. 
Another option is to use the Timer control, which is discussed later in this chapter. 
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Providing Feedbacic to Users 

Despite the visual problems tliat postbacl<s usually cause, they have one big advantage: the user 
can see something is happening. TheupdatePanei mal<esthisa little more difficult. Users have no 
visual cue that something is happening until it has happened. To tell your users to hold on for a few 
seconds whiletheir request is being processed, you can usetheupdateprogress control. 

The UpdateProgress Control 

You connect theupdateProgress COntrol to an UpdatePanel USing the AssociatedUpdatePanellD 

property. Its contents, defined in the <progressTerapiate> element, are then displayed whenever 
the associated updatepanei is busy refreshing. You usually put text such as "Please wait" or an 
animated image in this template to let the user l<now something is happening, although any other 
markup is acceptable as well. 

In addition to the AssociatedUpdatePanellO and <ProgressTemplate> properties, the 

UpdateProgress control features the following properties you typically use. 


PROPERTY DESCRIPTION 

Display-After Determines the time in milliseconds that the control waits before it dis- 

plays its contents. This is useful when the refresh period is so short that 
a notification message would be overkill. The default is 500 milliseconds, 
which is half a second. 

DynamicLayout Determines whether the control takes up screen real estate when hid- 

den. This maps directly to the CSS display: none; (when this setting is 
True/true) or visibility: hidden; (when it's False/false). 


In the following exercise, you see how to combine the updatepanei, the scriptManager, and the 
UpdateProgress controlsto mal<e the contact form user control flicl<er-free. 

^^^^^^Q Flicker-free Pages— Putting It All Together 

In this exercise, you modify the user control contactForm.ascxthat you created earlier, wrapping the 
entire control in an updatePanei so the page doesn't perform a full postbacl< when you enter a message 
and clicl< the Send button. To help users understand that the page is busy when the message is being 
sent, you add an UpdateProgress panel to the control. Inside this control you placean animated GIF 
image that is available in thecodedownload for this bool<. Alternatively, you can go to www.ajaxioad. 
info and create your own animated image. 

1. Open the contactForm.ascx user control from the controls folder in M arl<up View and wrap 
the entire <tabie> element and the Label at the bottom of the control in an updatepanei with a 
<contentTempiate>. You Can do this by typing the code directly in M arl<up View, by using a code 
snippet, or by dragging the control from the Toolbox. M al<esure the ID of theupdatePanei is set 
to updatePaneii. You should end up With the following code; 

<asp: UpdatePanel ID= "UpdatePaneii" runat=" server" > 
<ContentTemplate> 

<table class="auto-stylel" runat=" server" id="FormTable"> 
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</table> 

<asp:Label ID="Message" runat=" server" Text="Message Sent" Visible="f alse" /> 
</ContentTemplate> 
</asp:UpdatePanel> 

2. Save the changes to the control and then open the Frontend. master file from theMasterPages 
folder. Between the opening <form> tag and the <div> for the pagewrapper, add a 
scriptManager control by dragging it from theToolbox into the source of the page. You should 
end up with this code: 

<body> 

<form id="forml" runat=" server" > 

<asp: ScriptManager ID=" ScriptManager 1" runat="server"></asp: ScriptManager> 

<div id="PageWrapper"> 

3. Save the changes to the master page and close it. 

4. Open theupdatePanei .aspx pageyou created in an earlier Try It Out and remove the 
ScriptManager control. Because this control is now declared in the master page, you can no lon- 
ger redefine it in pages that are based on that master. Save and close the page. 

5. Open the Contact .aspx page from the About folder in your browser and then fill in the contact 
form. N otethat as soon as you clicl< the Send button, the form disappears and is replaced with the 
label stating that the message is sent. Just as with the earlier updatepanei example, you'll notice 
no pageflicl<er when the page reloads and displays the text M essageSent. 

6. To keep the user updated on the progress while the message is 
delivered to the mail server, you should add an updateprogress 
control to the page. Insidethis control, you add an animated 
image and some text informing the user the message is being 
sent. To add the image, locate the folder where you extracted the 

files that come with this bOOl< (at C:\BegASPNET\Resources) 

with File Explorer (Windows Explorer on Windows 7). Open the 
Chapter 10 folder and then the Monochrome folder. Drag the 
pieasewait.gif file from File Explorer into the images folder of 
theM onochrome theme under App_Themes. Repeat this process, 
but now drag pieasewait.gif from the DarkGrey folder into its 
respective theme's images folder. Figure 10-3 shows how both 
images should end up. 

7. Open the Monochrome. CSS file, scroll all the way down to the 
end, and add the following rule: 

. PleaseWait 
{ 

height: 32px; 
width: 5 00px; 

background- image : url (Images/PleaseWait . gif ) ; 
background-repeat: no-repeat; 
padding-left: 40px; 
line-height: 32px; 

} 


Solution Explorer ▼ □ X 

(2) '0 • A [p] 


Search Solution Explorer (Ctrl+;) f' 

Solution 'Site' (1 project) 


A @ SKe 


> 0 About 


> ^ App_Code 


> App_Data 


A ^ App Themes 


A d DarkGrey 


A ^ Images 


S Header.jpg 


□ PleaseWait.gif 


^ DarlcGrey.css 


A ^ Monochrome 


A ^ Images 


0 Header.jpg 


0 MenuBackground.jpg 


^ PleaseWait.gif 


^ Sidebar.jpg 


^ Button.skin 


Pi Monochrome.css 



FIGURE 10-3 
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8. Copy the exact same rule into theDarkGrey.css file for the DarkGrey theme. 

9. Switch bacl< to the contactForm.ascx user control and below the closing tag of the updatepanei 
at the end of the file, drag an updateprogress control from the AJAX Extensions category of the 

Toolbox. Set itSAssociatedUpdatePanellDtO UpdatePanell, the ID of the UpdatePanel defined 

earlier in the page. 

10. Between the <updateProgress> tags create a <progressTempiate> element, and within this tem- 
plate, create a <div> element with its class attribute set to pieasewait, the CSS class you created 
in step 7. Inside the <div> element, type some text to inform your users that they should hold on 
for a while. You should end up with this code: 

< /asp : UpdatePanel > 

<asp:UpdateProgress ID="UpdateProgressl" runat="server" 
AssociatedUpdatePanelID= "UpdatePanell "> 
<ProgressTemplate> 

<div class="PleaseWait"> 

Please Wait . . . 
</div> 
</ProgressTemplate> 
</asp :UpdateProgress> 

11. To emulate a long delay while sending out the message so you can see theupdateprogress con- 
trol, add the following lineof codeto theCode Behind of the control, just after the lines that 
change the visibility of the controls in the method that sends out the e-mail; 

VB.NET 

Message .Visible = True 

FormTable. Visible = False 

System. Threading. Thread. Sleep (5000) 

C# 

Message .Visible = true; 

FormTable. Visible = false; 

System. Threading. Thread. Sleep (5000) ; 

12. Save all your changes and open the contact .aspx page from the About folder once again. Fill in 
the required details and clicl< the Send button. Shortly after you clicl< the button, you should seethe 
updateProgress control appear that displays text and an animated image below the form, shown 
in Figure 10-4. Shortly after that, theupdateProgress control and the entire form should disap- 
pear and you should be presented with the M essage Sent text. 


COMMON MISTAKES If you don't see the described behavior, your browser 
maybe wori<ing with an outdated version of the CSS files. Press Ctrl+F5 or 
Ctrl+R to get the latest version from the server and try again. Alternatively, you 
can clear the browser's cache. 
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Get in touch with us 

Use the form below to get in touch with us. Enter your name, e-mail address, and your home or business phone 
number to get in touch with us. 


Name 

Imar Spaanjaars | 


E-mail address 

iman@spaanjaars.com | 


Repeat e-mail address 

imar@spaanjaars.com | 


Home phone number 

0800-1 2345B 


Business phone number 

0900-654321 


Comments 

Just checking in to tell you 1 really like this 
website. Would you consider reviewing the 
new album from the Chemical Brothers? 



Thanks. 



5 ■ Please Wait. 


FIGURE 10-4 


How It Works 

With the updatePanei in the user control, everything that falls within the contentTempiate of the 
updatePanei Will be Updated upon postback, without affecting other parts of the page. This way, you 
can hide the form with the server controls and replace it with the M essageSent label without causing 
any page flicker. 

To inform the user that his or her message is being sent, you also added an updateprogress control to 
the site. By default, this control will be shown when refreshing theupdatePanei it is attached to takes 
longer than 500 milliseconds (half a second). The <progressTempiate> element for the control con- 
tained a simple <div> element with its class set to pieasewait. You added the following CSS ruleto 
the two CSS files for the themes: 

. PleaseWait 
{ 

height: 32px; 
width: 5 00px; 

background- image : url {Images/PleaseWait . gif ) ; 
background- repeat : no-repeat; 
padding-left: 40px; 
line-height: 32px; 

} 

This code first sets the dimensions of the Update message to be 500 pixels wide and 32 pixels high. 
This is enough to span the width of the content block, giving you enough room for a longer message. 

The code then adds the animated image asa background image. To prevent the image from being 
repeated in the background, the repeat property is set to no-repeat. Then the left padding is set to 40 
pixels. This moves the text in the <div> to the right, so it appears next to the animated image. Finally, 
the line-height of the text is Set to 32 pixels, the same height as the entire <div>. This centers the 
entire text block vertically within the <div> element and aligns it nicely with the animated image. 
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Finally, you added the following line of code to the handler that sends the message: 

System. Threading. Thread. Sleep (5000) ; 

This code halts the execution of the page for 5 seconds (the number you pass to the sleep method Is 
expressed In milliseconds) so you can get a good look at the message In theupdateprogress control. 
In production code, you should remove this line, because It slows down the page considerably without 
adding any value to the page. 


I n addition to user-triggered page updates as you saw with the Send button, you can also trigger 
page refreshes programmatlcally at a specified Interval, as discussed In the following section. 


NOTE When you wrap server-side functionality in an updatePanei, it may 
sometimes be iiard to see if an error fias occurred and what the exact error 
message is. For example, when sending the e-mail fails, you won't see the real 
error message because it's hidden in the JavaScript. To make it easier to see the 
error message in case something goes wrong, you can temporarily remove the 
UpdatePanei from the page, or comment out its closing and opening tags using 
the server-side comments tags <%-- and --%> like this: 

<%--<asp: UpdatePanei ID="upl" runat=" server" ><ContentTemplate>--%> 

. . . Existing content goes here 

<%- -</ContentTemplate></asp :UpdatePanel>- -%> 


The Timer Control 

The Timer control that you find In the AJAX Extensions category of theToolbox Is great for execut- 
ing server-side code on a repetitive basis. For example, you can use It to update the contents of an 
UpdatePanei every 5 seconds. The contents of this updatePanei could come from a variety of 
sources, such as a database with the latest forum posts on a forum or news Items on a news site, an 
X M L file with Information to rotate advertisements In the browser, stock quotes from a stock web 
service, and more. 

The Timer control Is pretty simpleto use. At a specified Interval, the control fires Its Tick event. 
Inside an event handler for this event you can execute any code you see fit. The following code snip- 
pet shows the markup for a simple updatepanei and a Timer control that you can place Inside a 
content page based on your master page (because the master page already contains the required 

ScriptManager): 

<asp :UpdatePanel ID="UpdatePanell" runat="server"> 
<ContentTemplate> 

<asp:Label ID="Labell" runat= " server " ></asp : Label> 

<asp:Timer ID="Timerl" runat="server" Interval="5000" OnTick="Timerl_Tick" /> 
</ContentTemplate> 
</asp :UpdatePanel> 
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NOTE When you're using VB.NET, you don't need the onTick handler on the 
Timer control becouse that is taken care of with the Handles keyword in the 
Code Behind file in that language. 


W hen the timer "ticks" it raises its Tick event, which you can handle with the following code: 

VB.NET 

Protected Sub Timerl _ Tick(sender As Object, e As EventArgs) Handles Timerl.Tick 

Labell.Text = System. DateTime. Now. ToStringO 
End Sub 

C# 

protected void Timerl_Tick (object sender, EventArgs e) 
{ 

Labell.Text = System. DateTime .Now. ToString {) ; 

} 

W hen this code is run in the browser, the label will be updated with the current date and time every 
5 seconds. If you want to make it tick slower or faster, you need to adjust its Interval property, 
which specifies the time in milliseconds. 

This scenario with an auto-updating panel and the ability to refresh the content with a button click 
is quite common. The auto-refreshing panel is a non-intrusive way to feed the user the most up-to- 
date information from the server. In addition, you could offer your users a button to force a refresh 
of the data at any moment they choose. From a coding perspective, you wouldn't have to change 
much; you would call the same code (preferably wrapped in a separate method) from the Timer's 
Tick event handler and from the Button's ciick event handler. 

For more information about the Timer control, check out the M SDN documentation at http:// 

tinyurl . com/TimerClass4-5. 

You have now seen the most important server-side controls that the ASP. N ET AJAX Framework 
has to offer. In the remainder of this chapter, you find a discussion of WCF services and page meth- 
ods in your Ajax-enabled web pages. During the discussion of web services, you see how to use the 
ScriptManager Proxy, the final control IntheAJAX Extensions category of the Toolbox. 


USING WEB SERVICES AND PAGE METHODS IN AJAX 
WEBSITES 

The ability to call web services and page methods from an Ajax-enabled ASP.N ET websiteisa great 
addition to your web development toolkit. Being able to call a web service or page method means it's 
now much easier to access data at the server from client-side code, giving you a great alternative to 
full postbacks. The next section discusses web services, and a later section digs into ASP.N ET page 
methods. 
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What Are Web Services? 

Web services are essentially methods that you can call over the Internet and that can optionally 
return data to the calling code. This makes them ideal for exchanging data between different sys- 
tems. Because web services are based on solid and well-understood standards, they mal<e it easy to 
exchange data between different types of platforms and systems. For example, with a web service 
it's possible to exchange data between an ASP.N ET website running on M icrosoft Windows and a 
PH P-based site running on Linux. But at the same time, it's also possible to exchange data between 
an ASP.N ET or PH P website and a client browser using JavaScript. 

Introducing WCF 

To build web services in an ASP.N ET website, you useWindowsCommunication Foundation 
(WCF), M icrosoft's platform for service-oriented applications using the .N ET Frameworl<. In previ- 
ous versions of ASP.N ET you could also mal<e use of so-called ASM X web services, but these have 
now been deprecated in favor of WCF. H owever, this isn't really a problem because WCF can do 
anything that ASM X web services could do and much more. 

WCF supports a number of different underlying networl< communication technologies such as 
HTTP, .N ET R emoting, M icrosoft M essage Q ueuing, and Enterprise Services. This mal<es it an 
ideal platform for the exchange of data in a variety of scenarios such as locally on a single machine, 
on a corporate networl<, or over the Internet. For public-facing websites such as the Planet Wrox 
site, HTTPorHTTPS (the secured version of H TTP) is the natural choice because it will worl< 
cross-browser and across firewalls. 

For information about the other supported technologies, checl< out this article on the M SDN 
website at http://msdn.microsoft.com/iibrary/dd943056.aspx or get a copy of Professional 
WCF 4: WindowsCommunication Foundation with .N ET 4 (Wrox, ISBN ; 978-0-470-56314-4). 

To build a WCF web service, you add a WCF service (with an .svc extension) to your project. As 
you see later, you have a few different templates available, each serving a different purpose. Inside 
this service file you definea Service Contract and an 0 peration Contract. The Service Contract 
defines the overall service and the Operation Contract defines the various methods that are available 
on the service. The following snippet shows a simpleWCF servicewith a single method; 

VB.NET 

<ServiceContract (Namespace :="")> 
<AspNetCompatibilityRequirements ( 

RequirementsMode : =AspNetCompatibilityRequirementsMode .Allowed) > 
Public Class NameService 
<OperationContract { ) > 

Public Function HelloWorld (name As String) As String 

Return String. Format ( "Hello {o}", name) 
End Function 
End Class 

C# 

[ServiceContract (Namespace = "")] 
[AspNetCompatibilityRequirements ( 


Using Web Services and Page IVIethods in Ajax Websites | 365 


RequirementsMode = AspNetCompatibilityRequirementsMode .Allowed) ] 
public class NameService 
{ 

[OperationContract] 

public string HelloWorld (string name) 
{ 

return string . Format ( "Hello {o}", name); 

} 

} 

You define the Service Contract by applying a servicecontract attribute to your class. An attri- 
bute is lil<ea little tag or label that you can sticl< on code elements, lil<e classes, methods, properties, 
and so on, to mark that piece of code as something special. Other code interacting with the attrib- 
uted code can then see what attributes that code contains and mal<e decisions based on that infor- 
mation. Don't worry about that too much because you don't have to read those attributes yourself 
when working with web services. All you need to do is stick the attribute on a class or method to 
enable it for WCF. 

In C#you use square brackets to wrap the attribute, whereasVB.N ET uses angle brackets. You 
may also come across examples where the V B.N ET attribute is followed by a space and an under- 
score, because previous versions of V B.N ET required this. You don't need the underscore anymore, 
although it's perfectly valid to use it anyway. 

With this attribute in place, you signal to the run time that you really want to expose this class as a 
WCF service. 

TheAspNetcompatibiiityRequirements attribute that is applied to theservice class determines 
how the WCF service behaves at run time. The Allowed value enables your service to run in what's 
called theASP.N ET Compatibility M ode, which runs the WCF service in a similar way ASM X 
services were run. When you set the value to NotAiiowed, your services won't run correctly in your 
ASP.N ET websites. 

Besides the attribute on the class, each method you want to expose to the service is marked with the 
OperationContract attribute. This opt-in model enables you to create other methods (for example, 
helper methods that you call from your service methods) without exposing them to your service. 

Calling Services from Client-Side Code 

Calling a WCF service from a client HTML page is really simple. ASP.N ET takes care of most of the 
hard work for you by generating the necessary JavaScript to interact with theservice. All you have 
to do is register the service with the scriptManager control and then call it from client-side code. 
Given the NameService you saw earlier, you set up the scriptManager as follows; 

<asp : ScriptManager ID="ScriptManagerl" runat= " server" > 
<Services> 

<asp : ServiceRef erence Path=" -/WebServices/NameService . svc" /> 
</Services> 
</asp : ScriptManager > 

In this example, the service file is called NameService . svc and is located in a folder called 
webservices in the root of your website. 
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Once you set up the service, you can call the service from cllent-sldeJavaScrlpt In an ASPX page 
like this: 

NameService .HelloWorld ( ' Imar ' , helloWorldCallback) ; 

function helloWorldCallback (result) 
{ 

alert (result) ; 

} 


N ote that this code uses a mix of camel 
case and Pascal case. To align with the 
.N ET programming guidelines, the service 


NameService . HelloWorld (| 


HelloWarld(Strii»g name, onSuccess, onFailed, [userContext]) 
name: SystemString 


method uses Pascal casing and Is written figure 10-5 
as HelloWorld. In JavaScrlpt It's common 

to write methods using camel case, and thus the callback method Is written as heiioworidcaii- 
back with a lowercase "h." I'll stick to these naming conventions throughout the chapter, which 
will help you determine If something Is a pure client method, or a server-side method. To call a 

service method, you use ServlceName .MethodName. SO, In the preceding example, NameServlce Is 

the name of the service, and neiioworid Is the method you want to call. W hen you type this code 
In Visual Studio (and have registered the service In the scriptManager for the master page that the 
content page Is using), you get help from Intel 1 1 Sense as shown In Figure 10-5. 

Although the actual service definition has only a single parameter (the name parameter), the client 
side method In this example has four parameters. The first one Is the name parameter that I set up In 
the HelloWorld service method. If your service expected more parameters, they would be listed here 
as well. The second parameter enables you to pass a success callback method — a method you define 
In your code that gets called when the service call completes successfully. In the code example, this 
method Is called heiioworidcaiiback. You can name this method any way you want (as long as It's 
a valid name In JavaScript), but I prefer to call It serviceMethodwamecaiiback to clearly express 
for which code It serves as a callback. Asa parameter, the callback method receives the value 
returned from the service. In this example, this result Is a simple string, but you see later how you 
can also pass complex objects. The third parameter Is also a callback method and Is called when the 
service call somehow falls (for example, because the service encounters an error or Is not available). 
The final parameter Is called usercontext and enables you to pass additional data to your callback 
methods. This Is useful If you need additional context data to correctly process the success callback. 
In this example, the first parameter Is required and the other three are optional. H owever. In most 
real-world scenarios you Implement at least the onsuccess callback In order to work with the data 
returned from the service. 

In this example, the code In the success callback heiioworidcaiiback Is really simple; all It does Is 
alert the value returned from the service. H owever. It doesn't have to be like this. The values you can 
return from the service are not limited to simple strings, as you see In the following section. 

Exchanging Complex Objects with WCF 

Although a simple string can sometimes be enough as the response from a service, you typically 
need more Information. For example, you may want to load the last two reviews from a service 
call when a user clicks a refresh button. Rather than posting back the entire page, you could call a 
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service, retrieve tiie reviews from tlie database, and tlien display tliem in tlie page someliow. H ere's 
an example of liow a service that retrieves reviews could lool<: 

VB.NET 

<ServiceContract (Namespace :="")> 
<AspNetCompatibilityRequirements ( 

RequirementsMode : =AspNetCompatibilityRequirementsMode .Allowed) > 
Public Class ReviewsService 

<OperationContract ( ) > 

Public Function GetLatestReviews ( ) As List (Of Review) 
Dim temp As New List (Of Review) From 
{ 

New Review 0 With {.Id = 1, 

.Title = "21st Century Breal^down by Green Day"}, 
New Review 0 With {.Id = 2, 

.Title = "Sonic Youth: Daydream Nation live in Roundhouse, London"} 

} 

Return temp 
End Function 
End Class 

Public Class Review 

Public Property Id As Integer 

Public Property Title As String 
End Class 

C# 

[ServiceContract (Namespace = "")] 
[AspNetCompatibilityRequirements ( 

RequirementsMode = AspNetCompatibilityRequirementsMode .Allowed) ] 
public class ReviewsService 
{ 

[OperationContract] 

public List<Review> GetLatestReviews () 
{ 

List<Review> temp = new List<Review> ( ) 
{ 

new Review 0 {id = 1, 

Title = "21st Century Breakdown by Green Day"}, 
new Review 0 {id = 2, 

Title = "Sonic Youth: Daydream Nation live in Roundhouse, London"} 

}; 

return temp; 

} 

} 

public class Review 
{ 

public int Id { get; set; } 
public string Title { get; set; } 

} 
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To show you how to work with complex data at the client, this code example returns two hard- 
coded Review instances. In later chapters you see how to work with reviews in a database so you 
could make this example truly dynamic. For now, it just serves the purpose of showing the reviews 
at the client. 

The code sets up a generic collection of Review instances. For now, a Review is a simple class with 
two properties: an id and a Title. The collection is then filled using a collection initializer that 
addstwo Review instances, each of them created with an object initializer. Refer back to Chapter 5 
for more information on collection and object initializers. 

W hen you call the GetLatestReviews method from client code, you get back a collection of Review 
instances that you can loop over. The following code shows the getLatestReviewscaiiback 
method that accomplishes this: 

function getLatestReviewsCallback (result) 
{ 

var listltems = ' ' ; 

for (i = 0; i < result . length; i++) 

{ 

listltems += '<li>' + result [i] . Title + '</li>'; 

} 

document .getElementByld {' Reviews ')• innerHTML = listltems; 

} 

This code first declares a string that will hold the titles of the reviews. It then loops over the reviews 
in the result variable. J avaScript doesn't support f oreach, but using a standard for loop you can 
easily access all items in the collection. W ithin the for loop, the review's title is retrieved using 
result [i] .Title, which is then Wrapped in a pair of <ii> tags and appended to a string variable. 
In the end, the string is added as the innerHTML of an element called Reviews (which could look like 
this in the code: <ui id="Reviews"></ui>) so the review titles end up in a bulleted list. 

W hen you type this code, you'll notice you don't get Intel 11 Sense for the result object. VS doesn't 
know the actual type of the result variable, and as such can't help you find properties such as id 
and Title. 

N ote that this code is a bit clumsy. Using document .getEiementeyid and innerHTML isn't the best 
way to write code like this. Therefore, the next chapter introduces you to better alternatives when 
it discusses jQ uery. For now, though, this should suffice, showing the core concept of working with 
complex objects returned from a WCF service. 

It's important to realize that the Reviews object you work with in JavaScript is not the exact same 
object as the one you use in the service. Your V B.N ET or C#code targets the .N ET Framework at 
the server, whereas your JavaScript runs at the client. To get the object to the client, WCF serializes 
the collection of reviews into JavaScript 0 bject N otation (JSON )— a string representation of your 
objects that can be used directly in your JavaScript code. You see an example of JSON in a later 
exercise. 
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The web services in tlie Pianet Wrox project wiii only be used to liave a dient page in tlie browser 
taii< to tlie server and excliangedata. So, in tliissite, botli tine server and tlieciient are in tlie same 
web project— one executes at tlie dient (tlie JavaScript tliat calls tlie web server), and the other lives 
at the server (the web service itself). From a security point of view, this is the easiest solution because 
both parts trust each other. 

If you want your client-side pages to tall< to a web service on a different domain, you could host 
a service on your own site that calls the remote web service. The client browser then calls your 
service, which in turns calls the remote service. Thisscenario falls outside the scope of thischapter, 
though. 

You see this WCF theory in practice in the following exerdse. 


Creating Web Services 

Creating WCF services with VS is pretty easy, just as with all the other document types, VS comes 
with a template for a WCF service. You add the service to the site using the Add N ew Item dialog 
box. You then modify the service code to suit your requirements. N ext, you register the service in a 
scriptManager or scriptManagerProxy and then youYe ready to Call it from a client web page. 

VS comes with a few different templates to create a WCF service. To create one that's callable 
from a website, you usetheAJAX-enabled WCF Service template. When you add a service based 
on this template, VS adds the necessary configuration code to allow calling this service from a 
web page to the web.conf ig file for you. In addition, the coding model of this service is a bit 
easier than the standard WCF Service template because it stores all the code in a single class 
and file. 


lljUHmg^Q Creating a Web Service 

In this exercise you createa simple"Hello World" web service. This service accepts your name as an 
input parameter and returns a friendly, personalized greeting. There's not much real-world usage for 
this exact web service, but because of the simplicity in the service itsdf, it's easy for you to focus on the 
underlying concepts. 

1. Createa new folder called webservices in the root of your site to group all web services in a 
single folder. This is not required, but hdps in organizing your site. 

2. N ext, right-clicl< this new folder and choose Add o Add N ew Item. Clicl< the AJAX -enabled 
WCF Service item. Because the list of templates can be quite long, you can quicl<ly find the 
right item by searching for WCF in the search box in the top-right corner of the Add N ew Item 
dialog box. 


M ake sure that you clicl< the item for your programming language, and call the service 
Nameservice, as shown in Figure 10-6. 
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FIGURE 10-6 
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3. Click Add to add the service to tliesite. N otice liow tlie .svc file 
is added to thewebservices folder and the Code Behind file ( .vb 
or .cs) is placed in the site's App_code folder shown in Figure 
10-7. 

4. Open the NameService Code Behind filefrom theApp_code 
folder, rename the Dowork method to Heiioworid, and change 
the code so it accepts a string and returns a personalized greeting. 
N otice that in VB you need to change the code from a sub to a 
Function and have it return a string, and in C#from void to a 
string method, because the service method returns a string. Y ou 
should end up with code lil<ethis: 

VB.NET 

Public Class NameService 


<OperationContract () > 

Public Function HelloWorld (name As String) 

Return String. Format ("Hello {O}", name) 
End Function 

End Class 

C# 


As String 


public class NameService 
{ 
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FIGURE 10-7 


[OperationContract] 

public string HelloWorld (string name) 
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return string. Format ("Hello {O}", name); 


} 

} 

5. That's it. You just created a WCF service that can be called from client-side code. N ote that if you 
try to request the .svc file in the browser directly, you get a screen similar to Figure 10-8. 


http;//localhost:4967b/WebServire;/N3m. P ' g C 


^ Service 


Service 


This is a Windows© Communication Foundation service. 
Metadata publishing for this service is currently disabled. 

If you have access to the service, you can enable metadata publishing by completing the following steps to modify your web or 
application configuration file: 

1. Create the following service behavior configuration, or add the <serviceMetadata> element to an existing service behavior 
configuration: 

<behavior3> 

<3erviceBehavior3> 

<behavior naine="MyServiceTypeBehavior3" > 

OerviceMetadata httpGecEnabled="true" /> 
</behavior> 
</ 3erviceBehavior3> 
</behavior3> 


FIGURE 10-8 


You get this screen because by default, for security reasons, WCF services don't expose their meta data. 
This means they don't tell the outside world how they work and how to call them. If you want to test 
your WCF service you could enable it to publish its meta data by following the instructions on the ser- 
vice page shown in Figure 10-8. Once you've enabled the meta data, you get more information about 
testing the service using a WCF test client program. I usually don't do this for simple WCF services, 
though; it's often just as easy to call the service from a client-side page, as you see in a later Try It Out 
exercise. 

How It Works 

WCF services are essentially methods that can be called over a networl<, lil<e the Internet or your local 
network. They are designed to enable applications to communicate and exchangedata with each other. 
The default underlying message format for an Ajax-enabled WCF service isJSON.Thisisa very suc- 
cinct way to exchange data. For example, the two reviews you saw in an earlier example are transferred 
from the server to the client using the following J SON code: 

{"d" : [{" type" : "Review:#", "Id" :1, "Title" : "21st Century Breakdown 

by Green Day"},{" type" : "Review: #"," Id" : 2 , "Title" : 

"Sonic Youth: Daydream Nation live in Roundhouse, London"}]} 

I split the code over multiple lines to make it more legible. In reality, this code was all placed on a single 
line. If you look at the comments above your service code file you see that you can also have it return 
X M L. H owever, for most purposes, J SON is an excellent choice. 
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W hen you add a web service to your project, not all methods in this file become web-callable automati- 
cally. To expose a method as a service, you need to apply the operationMethod attribute: 

VB.NET 

<OperationMethod ( ) > 

Public Function HelloWorld (name As String) As String 
C# 

[OperationMethod] 

public string HelloWorld (string name) 

W ith this attribute, the method is visible to the outside world, and can thus be accessed by external 
systems. 


With the service created, the next steps are registering it with the scriptManager and calling it 
from client code. These two topics are discussed next. 

Configuring the ScriptlVlanager 

in an earlier section in this chapter you saw that the scriptManager control is a required com- 
ponent in almost all Ajax-related operations. It registers client-sideJavaScript files (those used 
by the Ajax framework and optionally your own), takes care of partial-page updates with the 
updatePanei, and handles interaction with the web services you have defined in your website. 
You can add a scriptManager to an individual page or to the master page so it becomes available 
throughout your site. 

When using web services, you also need to tell the scriptManager that you want to expose your 
web service to client script. You have two ways to do this: 

>• In the ScriptManager in the master page 

>■ In a content page that uses the web service, using the scriptManagerProxy class 

W hen you are going to use the web service in all or in most pages, you're best off declaring the web 
service in the master page's scriptManager. You do this by giving the scriptManager control a 
<services> element that in turn contains one or more serviceReference elements that point to 
your public services. For example, to make the Nameservice.svc service you created availablein all 
pages in your site, you'd add the following highlighted codeto the master page: 

<asp : ScriptManager ID=" ScriptManager 1" runat=" server "> 
<Services> 

<asp: ServiceReference Path="-/WebServices/NameService. svc" /> 
</Services> 

</asp : ScriptManager> 

By referencing the service in the master page, it becomes available to all pages based on that mas- 
ter. This also means that each page will download theJavaScript files needed to run this service. 
This is a waste of bandwidth and resources if your page is not using the web service at all. So, for 
services that you use on only a few pages, you're better off referencing the service in the page itself. 
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0 n a normal page that doesn't use a master page with a scriptManager, you can simply add a 
scriptManager to theWeb Form directly. However, if you are using a master page that already has 
its own ScriptManager (as is the case With the pages in the Planet Wrox website), you need to use a 
scriptManagerProxy control. Becauseyou Can have only one scriptManager in a page, you can't 
add another one in a content page that uses your master page with the scriptManager. Therefore, 
the ScriptManagerProxy serves as a bridge between the content page and the scriptManager in 
the master page, giving you great flexibility as to where you register your services. 

W hen you have the ScriptManagerProxy in place, you add the exact same <services> element to 
it as you saw with the scriptManager itself: 

<asp : ScriptManagerProxy ID= " ScriptManagerProxyl " runat= " server" > 

<Services> 

<asp : ServiceRef erence Path=" -/WebServices/NameService . svc" /> 
</Services> 
</asp: ScriptManagerProxy> 

The following exercise demonstrates how to register and access your web service from client-side 

code using the scriptManagerProxy. 

^^^^^^Q Calling Web Services from Client-Side Code 

In this exercise you register your web service in a scriptManagerProxy control so it becomes available 
in one page only. You then write some client-sideJavaScript code that accesses the service and then dis- 
plays its return value. 

1. First, create a page that uses your service and then registers it using a scriptManagerProxy con- 
trol. To do this, add a new Web Form in the Demos folder and call itwebservices.aspx. M al<e 
sure you base this page on your custom template, so it has the correct master page set and inher- 
its from the BasePage class, and then give it a Title such as web services Demo. 0 nee you've 
added the page, drag a scriptManagerProxy control from the AJAX Extensions category of the 
Toolbox into themarl<up of the cpMaincontent placeholder. 

2. W ithin the ScriptManagerProxy element, add a <services> element that in turn contains 
a ServiceRef erence With its Path Set to the Nameservice you Created earlier. N ote that 
IntelliSense helps you picl< the right file as soon as you type F%th^' by showing you a list with files. 
Clicl< Picl< URL at the bottom of the list and browse to the service file in thewebservices folder. 
You should end up with this code in thewebservices .aspx page: 

<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" runat= " Server" > 
<asp: ScriptManagerProxy ID=" ScriptManagerProxyl" runat=" server" > 
<Servlces> 

<asp: ServiceRef erence Path="-/WebServlces/NameServlce. svc" /> 
</Servlces> 
</asp : ScriptManagerProxy > 

</asp : Content> 

3. Right below the closing tag of the <scriptManagerProxy>, add an input (Text) and an input 
(Button) by dragging them from the HTM L category of the Toolbox. By using plain HTM L ele- 
ments and not ASP. N ET Server Controls, you can see that the code you are going to write really 
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executes at the client. Set the id of the text box to YourName and the id of the button to sayHeiio. 
Set the value of the button to say Heiio. Y ou should end up with this markup: 

</asp : ScriptManagerProxy> 

<input id= "YourName" type="text" /> 

<input id="SayHello" type="button" value="Say Hello" /> 

4. Below these two lines, add a client-side JavaScript block with the following code: 

<input id="SayHello" type="button" value="Say Hello" /> 
<script type= " text/ j avascript " > 

function helloWorldO 

{ 

var yourName = document. getElementById( 'YourName' ) .value; 
NameService.HelloWorld(yourName, helloWorldCallback) ; 

} 

function helloWorldCallback (result) 
{ 

alert (result) ; 

} 

</script> 

5. Add an onclick attribute to the button so that it calls the heiioworid method when you click it. 
Your code should look likethis: 

<input id="SayHello" type="button" value="Say Hello" onclick="helloWorld () ; " /> 

6. Save all your changes by pressing Ctrl+Shift+S, and then request thewebservices.aspx page in 
your browser. Enter your name and click the Say H ello button. If everything turned out well, you 
should be greeted with a message from the web service, repeating your name. Figure 10-9 shows 
the alert window in Apple's Safari. 


# Web Services Demo 



FIGURE 10-9 
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COMMON MISTAKES If you get an error instead of this message box, or you 
see a smaii yeilow triangle In the bottom-left corner of the screen, mai<e sure 
you typed the JavaScript exactly as In the code snippet. JavaScript is case-sen- 
sitive, so make sure you get all the capitalization right Also make sure that the 
JavaScript block you added in step 4 comes after the input box and button that 
you defined earlier Finally, make sure that the path to your web service matches 
the actual path of your . svc service file. 


How It Works 

To expose a WCF service to the client-side script in your application, you need to register it in the web 
.configfile. In addition, you need to apply the correct attributes to the service class. Both actions are 
carried out for you when you add an AJAX -enabled WCF service to your project. If you look at the 
Web. config file you See Something likethis: 

<system. serviceModel> 
<behaviors> 

<endpointBehaviors> 

<behavior name="NameServiceAspNetAj axBehavior " > 

<enableWebScript / > 
</behavior> 
</endpointBehaviors> 
< /behaviors > 

<serviceHostingEnvironment aspNetCompatibilityEnabled= "true" 

mult ipleSiteBindingsEnabled= " true " / > 
<services> 

<service name="NameService " > 
<endpoint address^"" 

behaviorConf iguration= "NameServiceAspNetAj axBehavior" 
binding="webHttpBinding" contract="NameService" /> 
< / service> 
</services> 
</system. serviceModel> 

The service element defines a single service; theNameservice in this case. If your site has more services 
available, you would add them to the same <services> element as theNameservice. The binding and 
contract attributes tell the run time that this service is callable over H TTP and is implemented by the 
Nameservice class. The address attribute is left empty, which means the run time takes care of assign- 
ing an address. For more advanced scenarios you can enter a relativeor absolute address here. The 

behaviorConf iguration pointsto a behavior Called NameServiceAspNetAj axBehavior defined Under 

the behaviors node. WCF separates behaviors from the actual service definition so you can reuse the 
same behavior across multiple services. In this case, the behavior is created to enable the service to be 
called by a web page through the enabiewebscript element. 


0 nee the service is created and registered in the web. config file, you also need to register it with the 
scriptManager. You could do this in the <services> element of the scriptManager in the master 
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page. The downside of registering tlie web service in tlie master page is tliat its client JavaScript is ref- 
erenced in eacli and every page in your site. For a service you oniy useonceor twice, it's mucli better 
to add a scriptManagerProxy to tlie Specific page(s) and register tlie service tliere. Witliin your page, 
tlie ScriptManagerProxy controi iooi<s and acts iii<e a normai scriptManager controi. H owever, in 
reaiity it's just a proxy controi tliat reiays aii its settings to tlie true scriptManager in tlie master page, 
combining tlie settings for botli controls. You used tlie ScriptManagerProxy controi asfoiiowsto set 
up tlie <s ervices> dement: 

<asp : ScriptManagerProxy ID="ScriptManagerProxyl" runat=" server" > 
<Services> 

<asp : ServiceRef erence Path=" -/WebServices/NameService . svc" /> 
</Services> 
</asp : ScriptManagerProxy> 

Aii you need to do is refer to tlie service by setting tlie path property. Just as witli otiier server-side 
URLsyou liaveseen in tliisbooi< so far, you can use tlie tiide(~) syntax to refer to tlie application's 
root. 

0 nee you have registered the service, it becomes available in your client-side code. N otethat 
Intel 11 Sense in VS is smart enough to discover the WCF services you have defined and registered. As 
soon as you typed NameServ ice followed by a dot in a client-side script blocl<, IntelliSense l<icl<ed in 
again and showed the public methods it found. This mal<es it extremely easy to find the correct ser- 
vices you have defined in your site. This is a huge improvement over old versions of Visual Studio that 
had only a fixed number of JavaScript-related items in the IntelliSense list. Starting with Visual Studio 
2008, IntelliSense is now actually able to look at your code and fill the IntelliSense list with the right 
variable names, methods, services, and so on that it finds in your code. In VS 2010 and VS 2012, 
M icrosoft improved Intel 11 Sense even further by improving the performance and the accuracy of the 
items shown in IntelliSense. 

To see how the actual pageworl<s, and how it accesses the web service, tal<ea lool< at the code in the 
<script> block. 

The first code you need to look at istheheiioworid method: 

function helloWorldO 
{ 

var yourName = document . getElementByld (' YourName ') .value ; 
NameService.HelloWorld(yourName, helloWorldCallback) ; 

} 

First, this code gets a reference to the text box you created earlier. You then access its value property 
to get the name the user entered. 

Thisnameisthen sent to theweb service method Heiioworid with the following code: 

NameService .HelloWorld (yourName, helloWorldCallback) ; 

The first argument of the call to Heiioworid is the argument that the web service method expects: 
a string holding your name. The second argument, heiioworidcaiiback, is a reference to another 
JavaScript method that is triggered when the service returns the result. By design, the call to the web 
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service is made asynciironousiy. Tiiis means tiiecaii to tiie service is made in a separate tli read and tlie 
heiioworid metliod exits siiortiy afterward. Because it can potentiaiiy tai<e a iong time for tiie web 
service to respond, you need to designate a metiiod tliat is responsibiefor liandiing tiie response w lien it 
comes baci< from tiie service. In tiiis case, tiie responsibie metliod is caiied heiioworidcaiiback. 

In addition to tliissuccess callbacl<, you could add another one that istriggered when theweb service 
somehow fails; for example, because the network connection isdown or because the service threw an 
exception. In that case, the call to Heiioworid would look likethis: 

NameService .HelloWorld (yourName , helloWorldCallback, helloWorldErrorCallback) ; 

TheheiioworidErrorcaiiback function could then look likethis: 

function helloWorldErrorCallback (error) 
{ 

alert (error . get_message ( ) ) ; 

} 

The error argument that is passed to this method has convenient methods and properties to display 
information about the exception. Asin the example, you useget_message o to get at the original 
exception that occurred at the server. You should use this only during development to figure out the 
actual error. In Chapter 18 you learn more about dealing with errors at the server so the error details 
are never sent to the client's browser. 

If everything goes according to plan, the call to heiioworid triggers the web service method 
HelloWorld. This method receives the name and returns a friendly welcome message. 

The string. Format method takes a string that contains numeric placeholders wrapped in a pair of 
curly braces ({}). Then for each numeric value, you supply a string value as subsequent parameters. In 
the preceding example there is only one placeholder, but you can easily extend the call to the Format 
method with more parameters. For example, if you wanted to format a string with a first and last 
name, you'd use this code; 

VB.NET 

Return String . Format ( "Hello {o} {l}", firstName, lastName) 
C# 

return string . Format ( "Hello {o} {l}", firstName, lastName); 

The String. Format method isgreatto make your strings much more readable. Instead of messy string 
concatenation using & or +, you simply define placeholders in the string, and then supply the values at 
run time. 

Finally, theweb service method returns the welcome message as a string. The web service run time then 
takes care of sending this return value to the calling code and then the heiioworidcaiiback method is 
invoked. This method has a result parameter that holds the return value of theweb service: 

function helloWorldCallback (result) 
{ 

alert (result) ; 

} 
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In the preceding exercise the result is a si mpie string. This means you can use alert (result) to 
directiy dispiay the resuit in a JavaScript aiert window. 

I n other situations, the result parameter couid hoid more compiex objects that provide access to its 
properties or coiiections with objects, as you saw earlier. 

The final thing you need to look at is how everything started in the first place. W hen you clicl<ed the 
button, the client-side heiioworid function was triggered. This was done by adding an onclick attri- 
bute to the button that tells the browser which JavaScript method to call when you clicl< the button. 
Again, better alternatives exist for the onclick attribute and the call to document. getEiementByid. 
Chapter 11, which discussesjQ uery, shows you cleaner alternatives. 

Obviously, theNameservice you saw in this chapter has little real -world usage. H owever, the principles 
of web services you learned in this chapter are easily applied to more complex services as well, enabling 
you to access data on the server from client-side JavaScript with just a few lines of code. 

You see theNameservice again in Chapter 18 when debugging is discussed. In that chapter you step 
through the code line by line so you can see which code executes and in what order. 


Although web services areextremely useful and pretty easy to create, they may bea bit of overl<ill 
at times. Sometimes you just need to send and receive a tiny bit of information to and from the page 
you're currently working with. You can do this using page methods, which are discussed next. 

Introducing Page Methods 

Page methods and WCF web services have a few things in common. In both cases, you can call 
them from the client using very little code. You can send data to them, and receive data back. 
Additionally, when calling them you can define success and failure callback methods. W hat's differ- 
ent is that page methods are defined directly in an existing A SPX page instead of a separate WCF 
service file. You can call them only from script running within that page. That makes them ideal for 
small, simple functionality that is limited in scope to the current page. 

To enable page methods you need to set the property EnabiePageMethods of the scriptManager 
control to True. You Cannot set this property on the scriptManagerProxy class so you need to set it 
on the ScriptManager control directly, which is— in the case of the Planet Wrox website— placed in 
the master page. Once you have enabled page methods, setting them up and using them is a two-step 
process: 

1. Create a public and static method (called a shared method in VB.N ET) in the Code Behind 
of the page you're working with. You need to apply the webMethod attribute to this method. 
The method can optionally receive data through its parameters and optionally return some 
data. 

2. Write the necessary JavaScript to call the page method and work with its result. 
You see how this works in the next exercise. 
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NOTE A static method is a method that you call on a class, rather than on an 
instance of that class. In Chapter 5 you created the calculator class that had 
four instance methods. This means that to use these methods, you need to 
create an instance of the class first using the new keyword (New in VB.NET). If 
you change the methods to be static methods instead by adding the keyword 
static ^Shared in VB.NET) after the pubiic/Pubiic access modifiers, you could 
directly call them on the Calculator class like this: 

VB.NET 

Dim result As Integer = Calculator .Add (4 , 5) ' result is now 9 

C# 

int result = Calculator .Add (4 , 5); // result is now 9 


Static methods are often used for utility methods that don't require an object instance to liold its 
own state, but as you see next, you also need static methods if you want to implement page meth- 
ods. Static methods and instance methods each serve a distinct purpose and are often not easily 
interchangeable. In the case of the calculator class, which doesn't maintain state between method 
calls, static methodswould have been a good option as well. Note that because the page methods 
are declared as static, you don't have access to other, instance-based members of the class. This 
means, for instance, that you don't have access to controls like buttons and text boxes. 


||j|ym2^Q Calling Page Methods from Client-Side Code 

In this exercise, you modify thewebservices.aspx pageand add a second button that calls a page 
method. To mal<e it easy to compare the two techniques of calling code on the server, the page method 
you create is similar to the web service you created earlier. 

1. Open up the Frontend. master master page in M arl<up View and set thesnabiePageMethods 

attribute of the ScrlptManager COhtrol to True: 

<asp : ScriptManager ID="ScriptManagerl" runat=" server" 
EnablePageMethods= " true" ></asp : ScriptManager > 

2. Open the Code Behind of webservices.aspx in the Demos folder and add the following server- 
side method within theDemos_webservices class but outside the existing page_Load method (in 
C#): 


VB.NET 

<WebMethod { ) > 

Public Shared Function HelloWorld (name As String) As String 

Return String. Format ( "Hello {o}", name) 
End Function 
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C# 

[WebMethod] 

public static string HelloWorld (string name) 
{ 

return string . Format ( "Hello {o}", name); 

} 

N otice how this code is somewhat similar to what you defined in the WCF service. W hat's differ- 
ent isthe inclusion of the static i<eyword (shared in VB.N ET) and thewebMethod attribute you 
apply to the method. 

ThewebMethod attribute won't be recognized directly. To fix this, type the following using or 
Imports statement at the top of the page, below the other statements: 

VB.NET 

Imports System. Web. Services 
C# 

using System. Web . Services ; 

Alternatively, clicl< the attribute once in the code and then press Ctrl+. (Ctrl+Dot) to bring up a list 
with suggested options and choose the first item to have the code inserted for you. 

3. Switch to M arl<up View and create a copy of the HTM L button you created earlier, set its id to 

SayHelloPageMethod, Set itS onclick handler tO helloWorldPageMethod ( ) ;, and Change itS 

value to better describe what the button does. You should end up with code lil<e this: 

<input id="SayHelloPageMethod" type="button" 

value="Say Hello with a Page Method" onclick="helloWorldPageMethod ( ) ; " /> 

4. Implement the helloWorldPageMethod method as follows: 

function helloWorldPageMethod { ) 
{ 

var yourName = document . getElementByld (' YourName ') .value ; 
PageMethods .HelloWorld (yourName, helloWorldCallback) ; 

} 

You can add the method directly below the heiioworid function, in the same script block. N otice 
there's no need to write a new callback method to handle the return value of the call to heiio- 
worid. You can easily reuse the one you created in theweb service example because all it does is 
simply alert the return value. 

5. Save all your changes and press Ctrl 4f 5 to run the page in the browser. Enter your name and click 
the Say Hello with a PageM ethod button. You should see the same message as you saw with the 
web service example. 


COMMON MISTAKES If you get an error about PageMethods not being defined, 
mal<e sure you added tiie static or shared l<eyword to ttie methiod's signature 
and moke sure you set EnablePageMethods to True on the ScriptManager con- 
trol in the master page. 
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How It Works 

From a client code perspective, almost all code is identical to the web service example except for 
the actual call to the method. Rather than calling serviceName.MethodName you now need to call 
pageMethods.Methodwame, Where pageMethods is a fixed name to refer to the ASP. N ET AJAX 
JavaScript implementation to call a page method. W hen you clicl< the button, theASP.N ET AJAX 
Framework sets up the necessary code to call the method that you defined in the Code Behind. Because 
the method is marl<ed as static, theASP.N ET run time doesn't need to create an instance of the Page 
class (and consequently doesn't need to go through its entire life cycle) but can simply call the method. 
This results in a fast and efficient response from the method. H owever, there is one caveat you need to 
be aware of: because the method is static and applies to a class, rather than an instance of that class, 
you can't access instance members, such as the controls defined in the page, from the page method. 

Page methods are ideal for sending and retrieving little bits of information that don't require a full post- 
back or don't need the overhead of a web service. You can use them for all kinds of scenarios, including 
sending user data (such as a username, preferences, pages they have visited, and so on), getting up-to- 
date data from a database or a web service, and so on. 


PRACTICAL AJAX TIPS 

Consider these tips to get the most out of ASP.N ET AJAX : 

>• Because the content for an updateProgress panel is visible only during an Ajax page 

update, you'll find that it's hard to design its contents. You seethe content only for a few sec- 
onds or less, and only after you cause a postback to the server. To make it easier to design an 
UpdateProgress panel, you should first design the message outside of theupdateprogress 
panel. For example, in the exercise from this chapter, you should move the <div 
id=" pieasewait" > outside any Other controls so it's always visible. You can then change the 
HTML and the CSS for the <div> until it looks exactly right. Then you can move the <div> 
back into theupdateprogress panel so it's shown only during a partial page update. 

>• W henever you are using an updatePanei, consider adding an associated updateProgress 
control aswell. Even if you don't seethe need because the updatepanei refreshes really fast, 
it may be worth adding theupdateprogress for people on slow computers or slow net- 
works. Or better yet: add an updateProgress to the master page in a convenient and visible 
area of the page (in the Footer section, for example). Don't set AssociatedupdatePaneiiD 
to anything so the progress panel will show on any Ajax callback. This way, you don't need 
lots of different waiting indicators in different areas of your site. 

> Don't overuse UpdatePanei controls. In many situations, the perceived performance of an 
application increases when using updatepanei controls even if the true performance is the 
same. This is a good thing, because your users think your application is faster than without 
an UpdatePanei. H owever, using too many updatePanei controls may confuse your users, 
especially when the controls are not bound to an updateProgress control that tells your 
users something is going on. Consider web services and page methods instead, because they 
can decrease the overhead and the data that gets transferred over the w i re. 
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>- You may be tempted to wrap the entire contents of a master page in an updatepanei control 
to avoid pageflicl<er wiien you browse from page to page. H owever, tiiis won't wori< because 
browsing to a new page is a new get request wiiereas tiieupdatePanei control worl<s only 
during postbacks. 


SUMMARY 

Ajax is a broad and very interesting technology that can really add a lot of valueto your site. 

TheupdatePanei control enables you to create flicl<er-free pages in no time, whereas the 
scriptManager control serves as the bridge between the server and the client and is responsible for 
tasks lil<e registering the necessary client scripts. Other controls in theAJAX Extensions category of 

theToolbOX include the ScriptManagerProxy, the UpdateProgress, and the Timer COntrolS. 

Besidesthese very useful server-side controls, theASP.N ET AJAX Framework also comes with func- 
tionality that enables you to access web services and page methods in your site with just a few lines 
of code. Both web services and page methods can be used to exchange data with the server without 
blocking or fully reloading the user interface. 

Although Ajax itself is a very compelling technology, it becomes even more useful in richer, data- 
driven scenarios. For example, using an updatePanei control around the records returned from a 
database to avoid page flicker when sorting, filtering, or paging your data greatly enhances the user's 
browsing experience. You learn how to work with databases in Chapter 12. With the knowledge 
about Ajax you gained from this chapter, you will quickly create flicker-free, database-driven web 
pages. 


EXERCISES 


1. The AJAX Extensions category of the Toolbox defines a ScriptManager and a 
ScriptManagerProxy. Explain the difference between these two controls, and explain when you 
should use the ScriptManager and when the ScriptManagerProxy. 

2. How can you let your users know a partial page update is in progress? 

3. To expose a method in your site as a web method that can be called by client-side script, you 
need to create a class and apply some attributes. Which class do you need to create, and which 
attributes do you need to apply? 


4. What are the steps you need to take to expose and use a method in your page as a page 
method? 


You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 


Ajax 

Asynchronous JavaScript And XML, a term for a collection of 


techniques used to create flicker-free web pages and to inter- 


Aft \A/ith thp^ c:pr\/Qr frnm plipnt-Qirlf^ pnrlp 

Attribute 

A code element that can be applied to other elements such as 


classes and methods to change their meaning or behavior 

Page method 

A server-side static (Shared in VB.NET) method defined in a 


page that can be called from client script 

ScriptManager control 

A core component of the Microsoft ASP.NET AJAX Framework 


that takes care of managing client script files and server-side 


Ajax behavior 

ScriptManagerProxy control 

The bridge between a content page and the ScriptManager 


control defined in a master page 

UpdatePanel control 

A control that helps create flicker-free pages by only updating 


content defined within its <conteiitTempiate> element 


UpdateProgress control A panel (a <div> or a <span>) that can be shown during the 

execution of an asynchronous Ajax operation 


Web service method 


A method that can be called over the Internet or local network 
by other applications 


jQuery 


WHAT YOU WILL LEARN IN THIS CHAPTER: 


>• What jQuery is 

>• What NuGet is and how to use it 

>" How to use jQuery to enhance your pages, including adding rich 
visual effects and animations 

>• How to leverage jQuery to enhance the ASP.NET validation 
framework 

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 
www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the Chapter 11 dowhload. 

In previous chapters you were introduced to JavaScript, the de facto language for client-side 
scripting and interacting with elements in your web pages at the client. Though the examples 
shown were relatively straightforward, JavaScript can do much more and is quite a power- 
ful programming language. But powerful as it may be, it has a few shortcomings. One of 
the problems with JavaScript is that not all browsers interpret it the same way. A lot of the 
JavaScript code you'll write will work in all major browsers, but subtle differences in code and 
behavior exist that make it difficult to write code that behaves exactly the same in all major 
browsers. Also, JavaScript lacks some useful features that would comein handy in your day- 
to-day JavaScript coding. For example, it has built-in methods to find a specific element on a 
page (using getEiementeyid as you saw in Chapters 9 and 10) and to find all elements of a 

specific HTM L tag (using getElementsByTagName), but it lackS features like getElementsBy- 

ciassName to get a list of elements with a specific class applied to them. 


386 I CHAPTER 11 JQUERY 


Fortunately, the Internet developer community has been very active developing frameworks that use 
JavaScript under the hood and that extend Its power, while offering a very rich feature set that helps 
you create Interactive cllent-slde web pages. Over the years, many JavaScript libraries have been 
developed— most of which are free— Including: 

>• Prototype (http : / /prototype] s . org) 

> Scrlptaculous, an add-on to Prototype (http://script.acuio.us) 

>• Ext J S (http://extjs.com) 

>• DojO (http: //dojotoolkit .org) 

0 ne framework that has received a lot of attention Is jQ uery. Initially developed and released by 
John Reslg In January 2006, jQuery has grown to be a very popular cllent-slde framework. It also 
caught the attention of M Icrosoft, which decided to start shipping jQuery with M Icrosoft products. 
Initially, jQuery shipped with the M Icrosoft ASP. N ET M VC Framework, but It's now also Included 
In Visual Studio 2012. 


AN INTRODUCTION TO JQUERY 

The main focus of the jQuery library has always been to simplify the way you access the elements In 
your web pages, provide help In working with cllent-slde events, enable visual effects like animations, 
and make It easier to use Ajax In your applications. In January 2006, John Reslg announced the first 
version of jQuery, which was followed by an official release of jQuery 1.0 In August 2006. M any 
more versions would follow, with version 1.7.2 as the latest, stable release at the time of writing. 


NOTE jQuery is under active development, and, as such, there's a fair chance 
that by the time you read this bool<, a new version of JQuery wiil have been 
released. Although the code presented in this chapter is expected to be com- 
patible with future versions, backward-compatibility issues may arise with later 
versions. If you find that some of your code doesn't work with the JQuery version 
you are using, consider using the files that come with this chapter's download to 
rule out any problems with the new version. 


You have a few ways to acquire the jQuery library and add It to your website. First of all, you can 
download the latest version of jQuery from the official website at http: // j query. com. N ot only 
will you find the downloadableflles there, but you'll also find the documentation, FAQs, tutorials, 
and much more Information you can use to make the most out of jQuery. 

The second way Is to usetheASP.N ET Web Forms Site template to create a new site, because It 
already contains a scripts folder with the necessary jQuery files. H owever, back In Chapter 2 you 
based the Planet Wrox website on theASP.N ET Empty Web Site template, which doesn't Include 
these files. 
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The third solution to add jQ uery to your site is by using a Content Deiivery N etwori< (CDN ) as 
you'ii see iater. 

Thefinai way is to use N uGet, the Library Paci<age M anager that ships with Visuai Studio (inciud- 
ing the Express editions). N uGet is discussed next. 

Introducing NuGet 

N uGet is an open source Library Pacl<age M anager that comes as a Visual Studio extension and that 
mal<es it very easy to add, remove, and update external libraries in your Visual Studio projects and 
websites. It was initially developed by M icrosoft but has now been turned into an 0 pen Source proj- 
ect that accepts contributions from the developer community. Although you'll see N uGet used in the 
context of a website in VS, N uGet is certainly not for ASP.N ET only. You can use it for all types of 
applications you can build with Visual Studio. 

To understand what problems N uGet solves, imagine you want to add an open source library such 
as jQuery to your ASP.N ET website. Although the specifics differ from library to library, you usu- 
ally need to go through the following steps; 

1. Find the website of the library. 

2. Find a linl< to the download of the latest stable version of the library and download it. 

3. Unblocl< the downloaded file using Windows Explorer, unzip it, and add it to your project, 
optionally creating a specific folder for it. 

4. Optionally, add a reference to the library in your project. 

5. Optionally, configure the library through the web.conf ig file or other code files. 

Using N uGet, you can greatly minimize the steps needed to add libraries to your project. For 
example, you can add thejO uery library with just five mouse clicl<s. In addition to adding pacl<ages, 
N uGet also enables you to easily update libraries to their latest versions after you've added them to 
your website, and it enables you to remove packages again without leaving a trace. 

Besides the extension for Visual Studio, N uGet also has its own website at http://nuget.org. H ere 
you can browse the catalog of pacl<ages, find commands for installing packages (more on that in the 
next section), read detailed documentation, and more. 

To manage libraries with N uGet, you have two options: you can use the M anage N uGet Packages 
dialog box or use the Package M anager Console. 

Using the Manage NuGet Packages Dialog Box 

The M anage N uGet Packages dialog box enables you to search for packages online, as well as man- 
age packages you already installed. You access this dialog box by right-clicking your website in the 
Solution Explorer and choosing M anage N uGet Packages. Alternatively, choose Toolso Library 
Package M anager o M anage N uGet Packages for Solution. Figure 11-1 shows the dialog box in 
action. 
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i' Installed packages 


^ Online 



All 


NuGet official package source 
t> Updates 
t> Recent packages 


Each package is licensed to you by its 
ovwner. Microsoft is not responsible 
for, nor does it grant any licenses to, 
third-parly packages. 


EntitjrFra m ework 

Entity Framework is 
Microsoft's recommende... 


IP jQuery is a fast and concise JavaScript 

Library that simplifies HTML document tr... 

jQuery Validation 

H J AjQuery plugin that makes simple 
cirentside form validation trivial. 


WebActivator 

A NuGet package that allows other 
packages to execute some startup code in... 


Icnn MFT 


Created by: Microsoft 
Id: EntityFramework 
Version: 4.3.1 
Last Updated: 5/15/2012 
Downloads: 620856 
View License Terms 
Project Information 
Report Abuse 
Description: 

Entity Framework is Microsoft's 
recommended data access technology for 
new applications. 

Dependencies: 

No Dependencies 


1^ 


1 2 3 4 5 » 


tings [ 


Close 


FIGURE 11-1 


On the left of the dialog box you can choose from four different types of lists with packages: 

> Irdalled packages-! his item shows a list of packages that have been installed into your 
website. You can use this option to find out which version of a package you have installed, 
uninstall packages, or install the same package into another website or project that is part of 
the same solution. 

>■ Online-This item enables you to search for packages online using the official N uGet 
package source, or on any additional feeds you may have added (which you can do using 
Tools o 0 ptions o Package M anager o Package Sources). By default, the list shows the 
most popular packages first (measured by the number of downloads), but you can change the 
ordering using the drop-down list at the top. To the left of the Sort by drop-down you have 
the option to display only stable packages, or also include prelease versions of packages. In 
the upper-right corner you can search for packages by entering (part of) their name. 0 nee 
you find the package you want to add to your website, select it, click the Install button and 
the N uGet Package M anager takes care of the installation process. You see more of this in a 
later exercise. 

> Updates-This item shows a list of packages for which new versions have been released 
since you installed the package into your website. Because updates could potentially break 
an existing website, they are not installed automatically and you need to manually select the 
packages you want to update. 

>• Recent packages- This item gives you a list of packages you used before. This serves as a 
shortcut to packages you use often so you don't have to search for them online each time you 
want to install them in your website. 
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You can find thefull documentation on tlie M anage N uGet Paci<ages diaiog box in tiie documenta- 
tion section of tiie N uG et website at http : //bit . iy/q2PiyM. 

Besides using tliis diaiog box, you can aiso manage paci<ages using the Paci<age M anager Consoie. 

Using the Package Manager Console 

The Paci<age M anager Consoie enabies you to manage your paci<agesfrom a command-iine interface. 
Tiiis is not as user-friendiy as using tiie diaiog box, but once you get tiie iiang of using N uGet you'ii 
find tiiat tile consoie can be reaiiy usefui. Using tlie consoie you can access tiie same features as witii 
tiie diaiog box and more. Figure 11-2 sliows tlie Paci<age M anager Consoie, wiiicli you can access 
from tiie main menu by ciioosing Tooiso Library Paci<age M anager o Paci<age M anager Consoie. 


Package Manager Console - ■ 


Package source: NuGet official package source ' O 



Package Manager Console Host Version 2.0.30619.9119 



Type 'get-help NuGet* to see all available NuGet commands. 


■ 

PM> 



100 7<j - < 




FIGURE 11-2 


NOTE NuGet is updated quite often (you'll be notified by Visual Studio when a 
new release is available) so your version number may be slightly different. That 
doesn't matter for the functionality described in this book. 


Tiiis command-iine window supports a number of commands tiiat lieip you manage paci<ages. To 
get a iist of tiie avaiiabie main commands, type Get-Help NuGd and press Enter. You'ii see a iist of 
commands appear tiiat you can execute at tiie consoie. Tlie consoie lias I nteiii Sense as weii to lieip 
you compietetiie commands by pressing tiieTab i<ey. In tlie exampie of tiie H eip command, sim- 
piy type Get foiiowed by tiieTab i<ey to get a iist witii aii commands tiiat start witii Get. You can 
tiien seiect tiie command from tlie iist and compiete it by pressing Tab again or by pressing Enter. 
Because many commands start witli Get, in tliis case it's probably quicl<er to type Get-H and then 
press Tab, or to type the complete command yourself. H owever, for longer and more unique com- 
mand names, usi ng the Tab l<ey can be a great ti me saver. 

Probably the most popular commands are Get -package and mstaii-package. Using Get-package 
you can list the packages that are currently installed in your site. To seethe list, just type the com- 
mand and hit Enter. If you try this now, your list will be empty because you haven't installed any 
packages yet. By using cet-package -ListAvaiiabie you can see a complete list of all available 
packages. Because thousands of them exist (and the list is growing), you want to filter the list using 
-Filter, like this: 


Get-Package -ListAvaiiabie -Filter jQuery 
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This lists ail tlie packages tliat havejQuery in their name. N ote that filtering isn't case sensi- 
tive. To find prerelease versions of packages that haven't been officially released yet, you use the 

-PreRelease Option, like this: 

Get-Package -ListAvailable -Filter jQuery -PreRelease 

Once you find the package you want to install, use the mstaii- package command. As an argu- 
ment, you need to supply it the name of the package. For example, to install jQ uery into your web- 
site you execute the following command: 

Install-Package jQuery 

After you hit Enter, the Package M anager Console downloads the package and installs it in your 
website exactly the same as using the M anage N uGet Packages dialog box does. 

For a complete overview of all the available commands, look at the official N uGet documentation 
at http://docs.nuget.org. You Can find the command-line reference here: 

http : //bit . ly/qON57L. 

In the next exercise, you use the M anage N uGet Packages dialog box to install the jQuery library 
into your website. 


||j|;fK2]Q| Using NuGet to Install Packages 

In this exercise you see how to find and install the latest jQ uery package using the M anage N uGet 
Packages dialog box. Using the dialog box is the most intuitive and easiest way, so it's a good place 
to get started with N uGet. In later parts of this book you also use the Console window to install 
packages. 

1. Start by opening the M anage N uGet Packages dialog box. You can do that by right-clicking your 
site in the Solution Explorer and choosing M anage N uGet Packages. Alternatively, you can choose 
Tools o Library Package M anager o M anage N uGet Packages for Solution. The dialog box shown 
in Figure 11-1 appears. 

2. If it's not already selected, click the Qnline item in the list on the left. 

3. Because jQuery is so popular, it should appear in the list with packages that are shown by default. 
If it's not, or if you want to install another package, use the search box at the top-right corner of 
the dialog box. 

4. Click thejQuery library package in the list. M ake sure you choosejust the jQuery library, and not 
thejQuery Ul (Combined Library) or jQuery Validation package, because these serve a different 
purpose. 

5. Click the Install button. A dialog box pops up that lists the actions that are executed to install 
the package. Q nee that dialog box has disappeared, click the Close button to dismiss the M anage 
N uGet Packages dialog box. 


That's it. You just installed jQuery using N uGet. 
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How It Works 


Search Solution Explorer (Ctrl+;) fi ' 

> ^ Reviews ^ 
^ Scripts 


^ jquery-1.7.2.intellisense.js 

jquery-1.7.2.js 
ifif jquery-UZmin.js 


£r moderni2r-2.6.2.j5 
S Styles 


FIGURE 11-3 


To see how it works, take a look at the scripts folder In your 
Solution Explorer. You should see an Item called j query- 1 . 7 . 2 . j s, 
shown In Figure 11-3. Remember, a new version may have been 
released since this book was written so your version numbers may 
bedlfferent. During Installation, N uGet added three jQ uery-related 
JavaScript files to your scripts folder (which It would have created 
If It didn't exist.) In addition. It kept track of the Installed packages 
In a file called packages .config that has been placed In the root of 
your website and created a packages folder to store a local copy of 
the downloaded packages. Depending on your settings, this location 
could differ, but most likely It's located In a folder named after your site In Documents\visuai studio 

2012\Projects. 

These three .js files all serve a different purpose. Theflle jquery-i. v .2 . js contains the core jQuery 
code In an uncompressed format. This means you can read Its code and use It for debugging purposes 
In cases where you need to see what code the library executes. Theflle j query- 1.7 .2 .inteiiisense 
. js contains the documentation for the code In thejQ uery library that Is used In the Intel I ISense lists 
and documentation pop-ups. You see how this works later In this chapter. Finally, theflle j query- 
i.7.2.min.js Is the core jQ uery library In a compressed format. Thislstheflleyou'll usein your web- 
site because It has the smallest size and Is thus the quickest to download. 


Now that thejQuery library has been added to thewebslte, the next step Is determining whereto 
use It. Because thejQ uery library adds to the size of your web pages. It should be a deliberate choice 
whether or not you Include It In your site. 

Choosing the Location for Your jQuery Reference 

To Include jQ uery In your website, you have a couple of options: 

>■ Add a reference to thejQuery library In just the web pages or user controls that require It. 

Add a reference to thejQuery library In the master page of your site so It's available In 
all pages. 

Both methods have their own advantages and disadvantages. Adding a reference to thejQuery 
library In just the pages that need It helps keep the size of your pages down a bit. W hen your users 
browse only to pages without jQ uery, they'll never have to download the library file, saving them 
some bandwidth. N otethat once they've visited a page that does reference the library, the browser 
will cache a copy of It, removing the need to download It again on subsequent visits to pages. 

Adding the reference to jQ uery In the master page of your site Is quite convenient, because all pages 
based on this master page automatically get access to thejQuery functionality. H owever, this results 
In a small performance hit on the first page of your site because the library needs to be downloaded 
from the server. This Is the option used In the Planet Wrox website. 
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In addition to tlie iocation wliereyou add your jQuery fiie, you aiso liavea few options witli regard 
to tiie way you inciudetiiefiie. 

Different Ways to Include the jQuery Library 

Because tiiejQ uery library consists of a single file with JavaScript code, you can embed a reference 
to the library in a page, user control, or master page using the standard <script> syntax: 

<script src=" FileName . ext" type="text/javascript"></script> 

It's important to use a separate closing </script> tag because some browsers will chol<eif you use 
a self-closing tag. 

By default, the N uGet package manager uses (and optionally) creates a scripts folder in the root 
of the site for JavaScript files such asjQuery, so a reference to thejQuery library (called jquery- 
i.7.2.min. js) Will end up lil<ethis: 

< script src=" /Scripts/ j query- 1 .7.2 .min . j s " type="text/ j avascript " ></ script > 

You can also embed the reference inside the scriptManager control that you added to the master 
page in the previous chapter. The scriptManager control has a <scripts> child element that lets 
you register JavaScript files that will be added to the final page in the browser. In its simplest form, a 
JavaScript file registered in the scriptManager looks I il<e this: 

<asp : ScriptManager ID="ScriptManagerl" runat=" server "> 
<Scripts> 

<asp:ScriptReference Path="-/Scripts/ jquery-1 . 7 . 2 .min. j s" /> 
</Scripts> 

</asp : ScriptManager> 

Another alternative is to refer to an online version of the library with M icrosoft's Content Delivery 
N etwork (CDN ) or Google Code. For more information on this, visit M icrosoft's CDN site at www 

. asp . net/aj ax/ cdn Or G OOgle'S A PI Site at http : / /code . google . com/ apis /a j axlibs/. 

The advantages of using online versions of external libraries are improved performance and lowered 
bandwidth for your servers. Because it is likely that visitors to your site already have downloaded 
the shared scripts when visiting another site, they don't have to download them again when visiting 
yours. 

In the following exercise, you add thejQuery library to the master page of the Planet Wrox website. 
With the library set up, the remainder of this chapter teaches you how jQ uery works and how to use 
it in the Planet Wrox website. 


NOTE By the time you read this bool<, a new version of JQuery may have been 
released. This means that the version number in your JQuery file may be differ- 
ent from what I am showing here. Be sure to update the filenames to match your 
library files. 
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TRY IT OUT 


Your First jQuery Page 

In this exercise, you add tliejQ uery library to tlie master page so it's available to all pages in your site. 


1 . Open the Frontend. master file from the MasterPages folder and switch it to M arl<up View if 
necessary. Locate the scriptManager control and add the following bolded markup to it: 

<asp : ScriptManager ID="ScriptManagerl" runat=" server" EnablePageMethods="true"> 
<Scripts> 

<asp: ScriptReference Path="-/Scripts/ jquery-1 . 7 . 2 .min. j s" /> 
</Scripts> 

</asp : ScriptManager> 

If your ScriptManager didn't have a separate closing tag yet, you should add one now (and 
remove the slash (/) from the opening tag) or the code won't be added correctly. 

2. Save and close the master page because you're done with it for now. 

3. To try outthejQuery library, createa brand new Web Form in the Demos folder based on your 

custom template. Call the page jQuery. aspx, and set its Title to jQuery Demo. 

4. With the new page open in M arkup View, add the following code to the content block for 

cpMainContent! 

<asp:Content ID="Content2" ContentPlaceHolderID=" cpMainContent" runat= " Server" > 
<input id="Buttonl" type="button" value="button" /> 
< script type= " text/ j avascript " > 
$ (document) . ready (function 0 { 

$ ( ' #MainContent ' ) . ess ( ' background- color ' , ' green' ) 

$C#Buttonl') .click(function() { 

$ ( ' #MainContent ' ) .ess ( 'background-color ' , ' red' ) 

.animate({ width: 'lOOpx', height: '800px' }) 

}); 

}); 

</script> 

< /asp : Content > 

Just like many other programming languages, JavaScript (and thusjQ uery) is case sensitive and 
quite sensitive to missing quotes, brackets, and parentheses, so makesureyou typethiscode 
exactly as shown here. Alternatively, you can copy and paste the code from the jQuery. aspx page 
that is part of thefull source codethat comes with this book. 

N otethat while typing, IntelliSense pops up, helping you complete the code and giving you infor- 
mation about various methods and parameters in a tooltip. If it doesn't pop up, makesureyou 
added the right <scripts> element to the master page. Also, try saving and closing all open docu- 
ments and then reopen jQuery. aspx. 

5. Save the changes to the page and then press Ctrl-ff 5 to open it up in the browser. Notice how the 
background color of theMaincontent element has turned to green. Click the button and notice 
how the background color changes to red and how the Maincontent element changes size, ending 
up with a width of 100 pixels and a height of 800 pixels. 
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COMMON MISTAKES If you get an error, or you don't see the animation, mal<e 
sure thie linl< to thie jOuery library is added to the master page correctly. Also, 
check your code for any typos you may have made. 


How It Works 

Although the effects shown in this exercise aren't that fancy, a lot is going on under the hood to make 
this example work. To understand how it works, first look back at the master page where you added a 
reference to thejQuery library: 

<asp : ScriptManager ID="ScriptManagerl" runat= " server " EnablePageMethods="true"> 
<Scripts> 

<asp : ScriptRef erence Path="~/Scripts/ jquery- 1 . 7 . 2 . rain. j s " /> 
</Scripts> 
< / asp : ScriptManager > 

This tells the script manager to include a script element pointing to thejQ uery library. If you look in 
the H TM L source for the page in the browser, you should see the following script element; 

< script src=" . . /Scripts/ jquery- 1.7.2 .min . j s " type= " text/ j avascript " ></script> 

This in turn tells the browser to download the j query- 1.7.2. min . js file from the scripts folder, giv- 
ing your page access to all functionality included in thejQ uery library. 

The next thing to look at is the code in thejQuery demo page. First, you added a standard <script> 
block that can contain JavaScript. Inside this block, you added somejQ uery code that is fired as soon 
as the browser is done loading the page. Everything between the opening ({) and closing (}) curly braces 
is executed when the page is ready: 

<script type= " text/ j avascript " > 
$ (document) . ready (function ( ) { 
// Remainder of the code skipped 

}); 

</script> 

Because thejQuery code interacts with the elements on the page, you often have to wait until the entire 
page has loaded so the elements you're programming against are available. Adding jQ uery code like this 
is a standard practice to delay execution of the code until the entire page is ready. You see more of this, 
including a handy shortcut to the "document ready function" $ (document) .ready later in this chapter. 

The code that is executed when the page is ready consists of two parts. The first line of code sets the 
background color of thenaincontent <section> to green: 

$ ( ' #MainContent ' ) . ess (' background-color ' , 'green') 

This code gets a reference to theMaincontent element and then calls the ess method to change the 
background color to green. Remember document .getEiementsyid from the previous chapter that gets 
a reference to an element in the page by its id? In this example, $ ('#Maincontent') is jQuery's equiva- 
lent, but as you see later, it's much more powerful. 

The second part sets up a click handler for the H TM L button you added to the page, similar to 
how you used onclick in Chapter 10. Inside the click handler you see some code that changes the 
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background color of the MainContent <section> element to red, and changes the height and the width 
of It using a fluid animation: 

$ ( '#Buttonl' ) .click(function() { 

$ ( ' #MainContent ' ) . ess ( ' background- color ' , ' red ' ) 

. animate {{ width: 'lOOpx', height: '8 00px' }) 

}); 

Again, you learn more about how jQ uery Is able to find the button and the <section> element and 
how the CSS and animate methods work later In this chapter, so don't worry too much If none of this Is 
making a lot of sense right now. 

When you click the button In the browser, the Maincontent's background color Is changed to red, and 
then Its width and height are changed to 100 and 800 pixels, respectively. 

W hen you typed thejQ uery codeyou may have noticed you got help from IntelllSense. As soon as 
you typed $ ( you got a tooltip explaining the Information you can pass to this function. Likewise, 
IntelllSense helps you find and complete the ess method and the various arguments you need to pass to 
It, as shown In Figure 11-4. 


<script type="text/javascript"> 
$(docuiiient).ready(function () 

{ 

$( '#MainContent ' ) .cs 


jQuery css(Object map) (+ 2 overloadCs)) 

Set one or more CSS properties for the set of matched elements. 



FIGURE 11-4 


IntelllSensefor jQ uery works through the extra file— j query- 1. 7 .2 . inteiiisense. js— you added 
to the site with N uGet. VS scans the library's folder for files ending In inteiiisense. js, parses them, 
and then uses the documentation It finds In them to build up the IntelllSense list. 

The reason for the separate documentation file Is to keep the size of the original jQ uery library down. 
Without the documentation, the library Is only 93 KB; with the documentation the file size would be 
much bigger. 

You should never Include a link to the IntelllSense version of the library In your pages because It doesn't 
add any value In the browser. 


N ow that you've seen somejQ uery at work. It's time to get a better understanding of Its possibilities 
and syntax. 


JQUERY SYNTAX 

To understand and use jQuery, you need to know a few Important basics. First, you need to know 
more about jQuery's core functionality. Including the $ function you've seen before, and Its ready 
method that enables you to execute code when the page Is done loading In the browser. N ext, you 
need to learn more about jQ uery's selector and filter syntax, which enable you to find elements In a 
page by criteria that you specify. Q nee you have a reference to one or more elements In a page, you 
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can apply various methods to them, like the ess method you saw earlier. You also need to know a 
little about jQuery events that enable you to attach behavior to the events that your HTML elements 
might fire, like click, mouseover, and so on. In the next couple of sections, you see all of these 
main jQ uery topics at work. 

jQuery Core 

M ost of thejQ uery code you write will be executed when the browser is done loading the page. It's 
important to wait with executing your code until the page is done loading the D 0 M . The DOM — 
the document object model— is a hierarchical representation of your web page and contains a tree- 
like structure of all your HTML elements, script files, CSS, images, and so on. TheDOM isalways 
in sync with the page you see in the browser, so if you make a programmatic change to the DOM 
(for example, with jOuery code), the change is reflected in the page in the browser. If you execute 
your jO uery code too early (for example, at the very top of the page), the DOM may not have loaded 
the elements you're referring to in your script, and you may get errors. Fortunately, it's easy to post- 
pone the execution of your code until the DOM is ready using the ready function in jO uery. You've 
already seen the ready function at work in the previous Try It Out, but it's shown here again now 
that you better understand what it's used for: 

$ (document) . ready (function ( ) { 

// Code added here is executed when the DOM is ready. 

}); 

Any codeyou add between the opening and closing curly braces is executed when the page is ready for 
DOM manipulation. jOuery also comes with a shortcut for the ready function to make it easier to write 
codethat fires when the DOM is ready The following snippet is equivalent to the preceding example: 

$ (function 0 ( 

// Code added here is executed when the DOM is ready. 

}); 


NOTE It's important that any code referencing the jQuery library is not run 
before the JQuery library Itself is loaded. Because the link to the jQuery library is 
added after the <body> fog by the scriptManager, you need to find a location 
later In the page. A good place for this Is near the closing < /body> fog defined in 
the master page. 


BecausejOuery codeisoften specificto a page, it makes sense to add thecodeto the end of just the 
pages that require it. To make this a little easier, you can add a contentPiaceHoider in your master 
page especially for this purpose. The pages that use this master page then have an easy location to 
write jO uery code. You see how to do this in the next exercise. 

In the previous jO uery example you saw some code that selected the Maincontent <section> ele- 
ment and the button in your page. H owever, jO uery comes with a lot more options to select specific 
elementsin your pages. These options are discussed next. 
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Selecting Items Using jQuery 

In jQ uery you use the dollar sign ($) as a shortcut to find elements in your page. The elements 
that are found and returned are referred to as a matched set. The basic syntax for the $ method 
is this: 

$ ( ' Selector Here ' ) 

Between the quotes (you can use single or double quotes, as long as you use the same type on each 
end) you enter one or more selectors, which are discussed later. The $ method returns zero or more 
elements that you can then influence using one of the many jQuery methods. For example, to apply 
some CSS to all h2 elements, you use the ess method; 

$ ( ' h2 ' ) . CSS ( 'padding-bottom' , ' lOpx' ) ; 

This applies a padding of ten pixels at the bottom of all headings at level two in the page. The cool 
thing about many of the jQuery methods is that, besides applying some design or behavior, they 
return the matched set again. This enables you to call another method on the same matched set so 
both are applied. This concept is called chaining or fluent programming where you use the result of 
one method as the input of another, enabling you to create a chain of effects. For example, the fol- 
lowing code first changes the font size of all level-two headings in the page, and then fades them out 
until they are invisible in five seconds: 

$( 'h2 ') .CSS ( 'font-size ' , '40px' ) .f adeOut (5000) ; // timeout is in milliseconds 

Asyou learned in earlier chapters, you should try to avoid using inline CSS properties lil<ethis. 
Instead, you should define CSS classes and assign them to the H TM L elements. You see how to do 
this later in this chapter. You learn more about the different visual effects lil<e animate and fadeout 
after you've seen how selectors and filters work. 

Basic Selectors 

jQuery selectors enable you to find one or more elements in your page's document object model so 
you can apply all sorts of jQ uery methods to these elements. The great thing about jQ uery selectors 
is that you already know how they work. Rather than inventing a new technique to find page ele- 
ments, the designers of jQ uery decided to use an existing selector-based syntax that you are already 
familiar with: CSS. Remember the CSS selectors from Chapter 3? You can use the exact same ones 
in jQuery. 

The Universal Selector 

Just as its CSS counterpart, the Universal selector matches all elements in your page. To set the 
font-family property of the style for each element in your page to Ariai, you use this code: 

$('*') .CSS { ' font-family' , 'Arial ' ) ; 

The Element Selector 

This selector returns a reference to zero or more elements that match a specific tag name. For exam- 
ple, this code turns the text color of all headings at level two to blue: 

$( 'h2 ') .CSS (' color ' , 'blue'); 
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The ID Selector 

This selector finds and retrieves an element by its id, the same as you would do in CSS. For exam- 
ple, to set the CSS class for a button called Buttoni, you use this code: 

$ ( '#Buttonl ' ) .addClass ( 'NewClassName ' ) ; 

W hen this code sets the CSS class (using the addciass method), the standard CSS rules apply. That 
means that for this code to worl< and change the appearance of the button, theNewciassName class 
needs to be availableto the page, either through an external CSSfileor by an embedded stylesheet. 
Refer to C hapter 3 if you need a refresher on the different cascading style sheet types. H owever, 
you'll also see examples where a CSS class is added that doesn't exist in a CSS file. This is convenient 
to "tag" elements so you can select them again later using a Class selector. 

The Class Selector 

The Class selector returns a reference to zero or more elements that match a specific class name. 
Consider this HTML fragment: 

<hl class= "Highlight " >Heading l</hl> 
<h2>Heading 2</h2> 

<p class="Highlight">First paragraph</p> 
<p>Second paragraph</p> 

N otice how two of the four elements have a CSS class called Highlight. Thefollowing jQuery code 
changes the bacl<ground color of the first heading and the first paragraph to red, leaving the other 
elements unmodified: 

$ ( ' .Highlight ' ) .ess ( ' background-color ' , ' red ' ) ; 

Grouped and Combined Selectors 

Just as with CSS, you can group and combine selectors. Thefollowing Grouped selector changes the 
text color of all hi and h2 elements in your page: 

$ ( ' hi , h2 ' ) . CSS ( ' color ' , ' orange ' ) ; 

With a Combined selector, you can find specific elements that fall within some others. For example, 
thefollowing jQ uery touches just the paragraphs that fall within theMaincontent element, leaving 
all other paragraphs alone: 

$ ( ' #MainContent p '). ess (' border ' , ' Ipx solid red'); 

To get a feel for the selectors in jQ uery and the effects you can apply to the matched set, the next 
exercise shows you how to use some of the selectors and apply some animations to the matched sets. 
In later sections of this chapter, you get a more detailed explanation of the different animations; for 
now, just focus on the selector part of thejQ uery code. 


lUymgjQI Using Basic Selectors 

in this exercise, you first add an additional contentpiacenoider control to the main master page so 
it's easier to add client-sidejQ uery code to your pages. You then write somejQ uery to try out the vari- 
ous selectors. 
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1 . Open up the Frontend. master file from the MasterPages folder and make sure it's in M arl<up 
View. 

2. N ear the bottom of the page, right before the closing </form> tag, drag a contentpiaceHoider 
from theToolbox. Set its id to cpciientscript. Your code should end up lil<ethis; 

<f ooter>Footer Goes Here</f ooter> 
</div> 

<asp: ContentpiaceHoider ID="cpClientScript" runat="server"> 
< /asp: ContentpiaceHoider > 

</ f orm> 

3. Save and close the master page because you're done with it for now. 

4. Create a new demo page called Basicseiectors.aspx in the Demos folder. Once again, base 
it on your own template and give it a meaningful title. Switch the page to Design View, locate 
the cpciientscript placeholder at the bottom, open its Smart Tasl<s panel, and choose Create 
Custom Content. 

5. Switch to M arl<up View and add the following HTM L to the cpMaincontent placeholder (don't 
accidentally add it to the placeholder you just added): 

<hl>Basic Selectors</hl> 

<div class="SampleClass" >I am a div.</div> 

6. Add the following jOuery code demonstrating all six basic selectors to the cpciientscript place- 
holder you created in step 4: 

<asp:Content ID="Content3" runat=" server" ContentPlaceHolderID="cpClientScript"> 
<script type="text/javascript"> 

$ ( function {) 

{ 

$('*'). CSS (' color ' , 'Green'); // Universal 

$(' #Sidebar' ). CSS ( 'border-bottom' , ' 2px solid red'); // ID 

$( 'hi' ) .bind( 'click' , function () { alertCHello World') }) ; // Element 
$(' .SampleClass ') .addClass (' PleaseWait' ) .hide (5000) ; // Class 

$( 'footer, header '). slideUp (' slow' ). slideDown (' slow' ) ; // Grouped 

$('#Sidebar img' ) . f adeTo (5000 , 0.1); // Combined 

}); 

</script> 

</asp : Content> 

7. Save all your changes and request the page in the browser. All text is now green, the sidebar has an 
extra bottom border, you seethe PleaseWait animated icon and text appear and then disappear, 
the header and footer disappear and then reappear, and finally, during a five-second period, the 
banner in the sidebar becomes almost transparent. If you clicl< the Basic Selectors heading you get a 
pop-up saying H ello World. 

How It Works 

Phew, lots of animation fun. I typically don't recommend adding all these features to your pages at once 
or you'll be sure to scare away most of your users. H owever, for this demo it worl<s really well because 
you can see some of the power of jOuery. You've seen all of the six selectors, but the code that is being 
executed against their matched sets is probably new to you. 
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The first selector selects all elements In your page and then applies the ess method to turn their font 
color to green. ThelD selector then getsa singleelement and calls the same ess method to apply a bor- 
der. The third example uses the Element selector to find the hi element and then dynamically binds a 
click handler so that when you click the heading, the code between the curly braces Is executed. 

Selector four demonstrates the Class selector and showsyou how to find elements by thelrclass 
name. N oticethat the CSS class being searched for doesn't have to be an existing CSS class defined In 
your style sheet. Once the elements are found, the addciass method then adds a new class to them, 
pieasewait In thIs example, which applies the spinner Image as the background to the<div> element. 
The hide method then hides the elements again during a five-second timeframe. 

Line number five uses the Grouped selector to find both the footer and the header elements. The sii- 
deup method then slowly decreases the height of these elements until they have completely disappeared. 
In doing so. It remembers the Initial size, so when you call siideDown again It knows to what size to 
restore the elements. 

The final exampleusesa Combined selector to find the banner Imagein the right-hand sidebar. Once It 
has found the Image, It slowly dissolves It (In five seconds) by setting Its opacity to 0.1 (10%) so It gets 
almost Invisible. 

In a later section In this chapter you see more of the various styling and animation methods that jO uery 
offers. For now. It's just Important that you understand the selector syntax to refer to the elements In 
your page. 


Oulte often, simply selecting Items In your page Is not enough. For Instance, when selecting rows In 
a table you may not want to select all rows at once, but only the odd or even rows, so you can apply 
a "zebra stripe" effect to the table where odd and even rows have different colors. That's where fil- 
ters come into play. 

Basic Filters 

in jO uery you can use filters to further filter the result set from a selector. This opens a lot of 
possibilities because it enables you to get at elements like the first, last, all even or odd ones, 
all headings, or items at a specific location. The table after the next exercise lists the most-used 
basic filters and gives an example of how to use them. To follow along with these examples 
and many that follow, carry out this exercise, which sets up a test page for most of the jO uery 
examples. 


TRY IT OUT 


Setting up a jQuery Demo Page 


In this exercise, you create a brand new demo page you can use to try out many of the examples in this 
chapter, simply by replacing a single line of code. 
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1. Create a new page based on your custom template and call it jQueryDemos.aspx. Givethepagea 
titleand then in the cpMaincontent placeholder add the following HTM L: 

<hl title="First Header" >First Header</hl> 
<table id="DemoTable"> 

<tr><td>Row 1 Cell l</td><td>Row 1 Cell 2</td></tr> 

<tr><td>Row 2 Cell l</td><td>Row 2 Cell 2</td></tr> 

<tr><td>Row 3 Cell l</td><td>Row 3 Cell 2</td></tr> 

<tr><td>Row 4 Cell l</td><td>Row 4 Cell 2</td></tr> 

<tr><td>Row 5 Cell l</td><td>Row 5 Cell 2</td></tr> 
</table> 

<h2>Second <span style="font-style : italic; font-weight: bold;"> 

Header</span>< /h2 > 
<input id="Buttonl" type="button" value= "button" /> 
<input id="Textl" type="text" /> 
<input id="Checkboxl" type=" checkbox" /> 
<input id="Checkbox2" type=" checkbox" /> 

You don't have to type all this code yourself. Instead, you can use VS to write most of it for you. 
M al<e good use of the Table menu and the H TM L category of the Toolbox. 

2. Add a content block for the cpciientscript below cpMaincontent and enter the following 
code: 

</asp : Content> 

<asp:Content ID="Content3" runat= "server" ContentPlaceHolderID="cpClientScript"> 
<script type="text/javascript"> 

$ ( function 0 

{ 

// Examples go here 

}); 

</script> 
</asp:Content> 

3. Replace the line // Examples go here with the following code to test out your setup: 

$ ( ' #DemoTable ' ) . ess ( ' background- color ' , ' green ' ) ; 

4. Save your changes and press Ctrl4f 5 to open the page in your browser. If all went well, the bacl<- 
ground color of the cells in the table turned green. 

5. Close your browser and go bacl< to VS. Press Ctrl+Z to undo your last changes until you seethe // 
Examples go here line again, and save the page. 

How It Works 

In this exercise you created a simple content block that can hold your jQ uery code. You then defined 
a code block that fires as soon as the browser isdoneloadingtheDOM . Insidethis block you wrotea 
simple selector that selects the table with an id of DemoTabie and then used jQuery's ess method to 
change its background color. 
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In the following table you see a list of jQ uery's basic filters. Remember, you can try out each exam- 
pleby replacing the //Examples go here linewith the code examples given. Then save the page 
and load it in your browser to seethe code at worl<. 

PURPOSE 

Enables you to select the first or last item in a matched set. The following exam- 
ple changes the background color of the first or last row of the table to red: 

$ ( ' #DemoTable tr: first ')• ess {' background-color ' , 'red'); 
$ ( ' #DemoTable tr: last '). ess (' background-color ' , 'red'); 

First, the table is found using #DemoTable. Then all its rows are found using tr. 
Finally, the first or last row is found using the : first and : last filters. 

Enables you to select the odd or even items in a matched set. The following 
example changes the background color of the odd rows of the table to red. 
Because the numbering is zero-based, you actually see the second and fourth 
rows change color (because they have an index of 1 and 3, respectively). 

$ ( ' #DemoTable tr: odd '). ess (' background-color ' , 'red'); 

Matches elements by their index. : eq (equals) returns a single element by its 
index, and : it (less than) and : gt (greater than) return items smaller or greater 
than the given index, respectively. Examples: 

// Changes the color in the first row (with an index of 0) 
$ ( ' #DemoTable tr : eq (0) '). ess {' color ' , 'green'); 

// Changes only the last two rows. The first three 
// with an index of 0 , 1 and 2 respectively, are skipped. 
$ ( ' #DemoTable tr : gt (2) ' ) . ess { ' color ' , 'green'); 

// Changes the text color of the first two rows to green. 
$ ( ' #DemoTable tr : It (2) ' ) . ess { ' color ' , 'green'); 

Finds all headers (from hi to he) in the page. Example: 
$ ( ' : header ' ) . ess ( ' color ' , ' green ' ) ; 

For a complete list of all basic filters, check out thejQ uery documentation at http: //api .j query 

. com/category/ selectors/. 

Advanced Filters 

Besides the basic filters you just saw, jQuery supports a lot more filters that enable you to get items 
based on the text they contain, whether or not they are visible, and also on any attributes they may 
have. Additionally, you can find filters to get at form elements (I il<e buttons, check boxes, radio but- 
tons, and so on) and a number of selectors that enableyou to select children, parents, siblings, and 
descendants. The following table lists the ones you'll use most. The online jQ uery documentation 
gives you access to the complete list, with full working examples showing how they work. 


FILTER 

: first 
: last 


:odd 
: even 


eq ( index) 
It ( index) 
gt ( index) 


: header 
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FILTER 

PURPOSE 

: contains ( text ) 

Matches an element by the text it contains. Example: 

$(' td: contains ( "Row 3 " ) ' ) • ess ( ' color ' , 'green'); 
If you leave out the td, the entire table will be green. This is because 
the table itself is matched as well (one of its children contains the 
text Row 3) so the color is applied to the table, which in turn changes 
the text in each cell to green. Note how 1 am using double quotes 
for the text string to avoid closing the single quote from the selector 

LUU oUU 1 1 . 

:has (element) 

Matches elements that contain at least one of the given elements. 
Example: 

$ { ' :header : has { "span" ) ' ) . ess ( ' color ' , ' green ' ) ; 
This matches only the h2 because it's a header ( : header) and con- 
tains a <span> element (has ("span") ). 

[attribute] 

Matches an element based on the given attribute. Example: 

// Matches the button and the text box as both 
// have a type attribute but would also 
// match other elements with a type attribute 
$ ( ' [type] ' ) . CSS ( ' color ' , ' green ' ) ; 

To select only input controls with a type attribute you can use this: 
$ ( ' input [type] ' ) . ess ( ' color ' , ' green ' ) ; 

You need to type some text in the text box to see the green font 

color. 

[attribute=value] 

Matches an element based on an attribute and that attribute's value. 
Example: 

// Matches just the text box 

$ ( ' [type=text] ' ) . ess ( ' color ' , ' green ' ) ; 

: input 
:text 
: password 
: radio 
: checkbox 
: submit 
: image 
: reset 
: button 
: hidden 
: file 

These selectors enable you to match specific client HTML form ele- 
ments. For example, the code snippet that finds the button and the 
text box can be rewritten using a Grouped selector as follows: 

$(':button, : text '). ess (' color ' , 'green'); 
You can use these filters to do some fancy stuff. For example, to 
write some functionality that checks all check boxes in a form, you 
can use: 

$ ( ' : checkbox ' ) . attr ( ' checked ' , true) ; 
In order to uncheck all check boxes, you pass false as the second 
argument to the attr method. 


Powerful as these selectors and filters are, they are pretty useless without a way to act upon their 
results. Changing the looks and behavior of the items in the matched set is the topic of the next 
section. 
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MODIFYING THE DOM WITH JQUERY 

Once you have a matched set, you want to do something with it. For example, you may want to apply 
a CSS class or style to the items in it. 0 r you may want to append some behavior to them, like 
adding a click handler that fires some code when the items get clicked. You've already seen some 
examples of this using the ess and bind methods, but jQuery has a lot more to offer. In the next two 
sections, you see how to work with the various CSS methods and learn how to set up event handlers. 

CSS Methods 

CSS is supported in jQuery in a few different ways. First, there's thecss method that enables you to 
retrieve a specific CSS value (I ike the color of an item), and to set one or more CSS properties on a set of 
elements. Secondly, methods likeaddciass, removeciass, toggieciass, and hasciass enableyou to 
alter or inspect theCSS classes that are applied to elements. Furthermore, a couple of methods enable 
you to work with the dimensions and position of an element. I discuss only the most common ones, but 
you can look up the entire list at the jQuery website. The examples once again usethesameH TM L 
fragment you saw before, so it's easy to follow along if you want to try them out in your browser. 

css(name, value) 

This method enables you to set a specific CSS property on a matched element. The name argument 
refers to a CSS property (such as border, color, and so on) and the value defines the style you 
want to apply. The following example changes the background color of the hi element: 

$ ( ' hi ' ) . ess ( ' background- color ' , ' green ' ) ; 

css(name) 

This method retrieves a specific CSS value based on the property you pass to it. The following exam- 
ple alerts 'italic' because that's the font-styie of the <span> element in the heading level 2: 

alert ($ ( ' h2 span' ) .ess ( ' font -style' ) ) ; 

You can use this value in your jQ uery scripts; for example, you can use it to toggle the f ont-styie 
between italic and normal or to set multiple elements to the same style. 

css(properties) 

This is quite a powerful method because it enables you to set multiple properties on the matched 
elements in one fell swoop. The following example changes the color of all cells in the table to red, 
changes the font to Verdana and sets their padding to lOpx. You pass the data in what is called an 
anonymous object where you wrap the entire set of properties in a pair of curly braces ({ }), separate 
each property and value by a colon (:) and each pair by a comma: 

$ ( ' #DemoTable td' ). ess ({' color ' : 'red', ' font -family ' : 'Verdana', 
'padding' : 'lOpx'}); 

addClass, removeClass, and toggleClass 

Theaddciass and removeciass methods enable you to add and remove classes from elements, 
respectively. Just as with plain CSS, you're better off using these methods than assigning inline CSS 
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with the CSS (properties) method. This way, it's easier to define CSS dasses at a centrai piace, 
which mai<es them easier to maintain and reuse. The next exampie shows how to assign a ciass to 
theh2 eiement: 

$ ( ' h2 ' ) . addClass ( ' PleaseWait ' ) ; 

If you want to remove the ciass again, you caii removeciass iii<ethis: 

$ ( ' h2 ' ) . removeClass ( ' PleaseWait ' ) ; 

The toggieciass method assigns the ciass if it's not present yet and removes it otherwise. 
Aii three methods enabieyou to pass muitipie dasses by separating them with a space. 

attr(attri bute Name) 

Theattr method enabiesyou to read and setthevaiuesof attributes on HTML eiements. This ver- 
sion, which accepts a singie argument, is used to read an existing vaiue. For the attributeName 
you pass the name of the attribute as a string. Thefoiiowing exampie aierts First Header, the title 
attribute of the hi header: 

alert ($ ( 'hi ' ) .attr { 'title ') ) ; 

attr(attributeName, value) 

The second version of attr, which accepts two arguments, is used to change the vaiue of an attri- 
bute. Besides the name of the attribute you want to change, you aiso need to send the new vaiue for 
the attribute. Thefoiiowing exampie checi<s aii checi< boxes in the demo page: 

$ ( ' : checkbox ' ) . attr ( ' checked ' , true) ; 

Together, these CSS methods give you great power to change the iooi< and fed of dements in your 
page. You can tai<e this one step further by using the rich event system in jQ uery that enabiesyou to 
assign and remove aii i<inds of handiers to your dements through code. 

Handling Events 

Events are a very common technique in many programming ianguages. You've seen .N ET events 
at wori< in previous chapters where you used them to handie a Button controi's ciick event or 
a Page's Load event. J avaScript and the DOM are no exception and events are avaiiabie in many 
piaces. For exampie, many HTM L dements (such asa button defined with input type=" button") 
have a click event that fires when you ciici< it. Lii<ewise, they have mouseover and mouseout events 
that fire when you move your mouseover or away from them. N ormaiiy, when you define the events 
directiy in mari<up, they iooi< iii<ethis: 

<input type="button" onclick="alert {' Hello '); " value="Click Me" /> 

Rather than writing the code they trigger iniine (theaiert function in this exampie), you can aiso 
point them to JavaScript functions you can write you rsdf. Thefoiiowing exampie caiis a fictitious 
SayYourName function: 

<input type="button" onclick="SayYourName () ; " value="Click Me" /> 
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jQuery goes one step further, and enables you to hook up events not only to a single element, but to 
a whole matched set at once. This Is extremely powerful because It enables you to bind handlers to 
a large number of elements with only a few lines of code. Consider, for example, a table with many 
rows. To make the table a little more visually attractive, you could apply a technique that Is called 
"active Item tracking," where the Item your mouse Is over changes color. W Ithout jQ uery you would 
write onmouseover and onmouseout handlers on each and every row In the table. This clearly leads 
to a lot of excessive bloat In the final HTML of the page. With jQuery, all you need Isthlscode, 
again using the H TM L code samples you used before: 

$(function() 
{ 

$('#DemoTable tr") 

.bindCmouseover', functionO { $(this) .cssCbackground-color', 'yellow') }); 

}); 

This code finds all the table rows within the #DemoTabie element and then dynamically assigns a 
function that Is called when you hover your mouse over each row. If you hover your mouse over 
them, the background changes color. But If you move your mouse away, the new color remains. 
To fix thisproblem, you can usejQuery's chaining concept, where the result of a jQuery method 
returns the matched set so you can apply another function to It. To bind the mouseout to a new 
function, simply call bind again on the return value of the first call to bind: 

$('#DemoTable tr') 

.bindCmouseover', functionO { $ (this) .ess ( 'background-color ' , 'yellow') }) 
.bindCmouseout', functionO { $(this) .cssCbackground-color', '') }); 

N otice how the semicolon that closed off the line In the previous example has been moved to the 
final line. Then the second bind Is simply chained to the previous call to bind. It's a bit difficult to 
see because the code Is spread out over multiple lines to accommodate the width of this book, but 
this code actually comes down to this: 

$ ( ' #DemoTable tr ') .bind ( 'mouseover ' , ...). bind ( 'mouseout ' , . . . ) ; 

This code does three things: first It uses $ ('#DemoTabie tr') to find all rows In the table. Qn the 
matched set that Is returned It calls bind to dynamically hook up some behavior that fires when you 
move your mouseover a row. Then bind Is called again on the matched set returned by the first call 
to bind to reset the background color when you move your mouse away from the table row. N otIce 
how I am setting the color to an empty string (") to remove the CSS background property so you can 
seethe original background again. 

There's one more Important thing to look at In this example and that's the way the background 
color Is set: 

$ (this) . CSS ( 'background- color ' , 'yellow ' ) 

The this keyword In this example refers to the element to which the Item Is applied: the table row In 
this case. Using $ (this) then gives you a jQuery matched set (containing a single element) to which 
you can apply regular jQuery methods such as ess. Instead of using jQ uery you can also execute 
standard J avaScrlpt against the this element. 


this . style .backgroundColor = 'yellow' 
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The table row (and many other HTML elements) has a style property that lets you change CSS 
styles programmatically. M aybeyou expected to use style. background-coior to change the color, 
but that's not how it works in JavaScript. In that language, the dash (-) is not a valid identifier so in 
JavaScript all dashes are removed from the property names. Furthermore, each letter following the 
original dash is written in uppercase. So, background- color in CSS becomes backgroundcoior 
in JavaScript, font-famiiy becomes fontpamiiy, and so forth. Keep these naming rules in mind 
when you try to set CSS information dynamically through JavaScript and jQuery. 

Miscellaneous jQuery Functionality 

Before you move on to the next topic of effects with jQ uery, you need to understand a few impor- 
tant functions in jQ uery. First of all, there's each. 

The each method iterates (or loops) over a collection. This is great if you want to apply some behav- 
ior to items in your matched set that you cannot set with a singlejQ uery function. As an argument 
to each you Supply a function that is executed for each item. The following each example alerts 
the contents of each table cell by looping over the items in the matched set and then calling aiert. 
Again, you can try this out with your jQueryoemos.aspx page. 

$ ( '#DemoTable td' ) . each {function ( ) 
{ 

alert (this . innerHTML) ; 

}); 

Two other important methods include parent and prev. These methods are used in DOM travers- 
ing, where you can "wall<" up and down the document tree finding elements that are either below or 
above an item, or at the same level. 

Theprev method selects a matched element's direct sibling. To see how this worl<s, take a look at this: 

alert ($( '#DemoTable td: contains { "Row 1 Cell 2") ') -prev () [0] . innerHTML) ; 

W hat do you think this alerts? If you guessed "Row 1 Cell 1," you're right. The $ selector first 
selects the table cell in the second column of the first row by the text it contains. Theprev method 
then returns its first sibling: the cell to the left of it. Because a matched set is a collection even if it 
contains only a single item, you still need to use an index er (with [o] ) to refer to that first item. The 
table cell then exposes an . innerHTML property that returns the content of the cell. 

Finally, take a look at parent: 

alert ($( '#DemoTable td: contains { "Row 1 Cell 2") ') -parent () [0] . innerHTML) ; 

If you run this code in the demo page, you get the result shown in 
Figure 11-5. 

If you're not seeing this exact same HTML, make sure that the line 
that begins with aiert is the only one inside your document ready 
function, because the other examples may influence the HTML for 
the table. 

The selector isthesameasin the previous example. The parent func- 
tion then points to the<tr> around the matched tablecell. Alerting 
the innerHTML then retums the H TM L for the two cells that this row contains. 


<td>Rowl Cell1«ltd> 
<td»Row1 Cell2</td> 


OK 
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Common Mistakes When Working with jQuery 

Depending on the complexity of tliejQ uery functionality you're using, writing the code can be quite 
challenging. You need to take care of the proper capitalization, parentheses, bracl<ets, commas, and 
more. W hen you find your jQ uery code doesn't run or has unexpected behavior, checl< to see if your 
code is suffering from thefollowing problems. 

Your ID Selectors Don't Work 

It's lil<ely you forgot to includethe # symbol in front of it. $ ('oemoTabie') does not select the table 
with an id of DemoTabie, whereas $ ('#DemoTabie') does select it. Another situation where your 
ID selector might not worl< is when you've got the casing wrong. ID selectors are case sensitive, so 

$ {'#DemoTable') iS not the Same aS $ ('#demotable' ) . 

Your ID Selectors Don't Work, Even with a Hash Symbol 

in this case, it's lil<ely that the client element doesn't have the id you expect. M aybethe ASP.N ET 
run time changed the client id by prefixing it with the id of its parent? In that case, try setting the 
ciientiDMode on the relevant control to static so the id ends up more predictable. Also make 
sure your code executes inside the document ready function because the elements you're targeting 
may not be available yet. 

None of Your Code Seems to Run 

Check your parentheses, curly braces, and quotes. Each pair needs to be balanced, with an equal 
number of opening and closing items. 

So far the code you've seen revolves mostly around finding elements in your page and changing their 
appearance through CSS or to execute] avaScript. H owever, jQ uery comes with a bag of tricks to 
animate elements in your page as well. In the next section you see these so-called effects, followed 
by a Try It 0 ut exercise that shows them in action. 


EFFECTS WITH JQUERY 

In an earlier example in this chapter you saw how to use siideup and siideDown to slowly hide and 
show elements. But these are only two of the many effect and animation methods that jQ uery has 
available. Thefollowing table lists the most common ones you can use. Q nee again, you're advised 
to try out all examples using the jQueryDemos.aspx page. 


METHOD NAME 

PURPOSE 

show ( ) 
hide 0 

Hides or shows the matched elements by decreasing the height, width, and 
opacity (making them transparent). Both methods enable you to define a fixed 
speed (slow, normal, and fast) or a number defining the animation time in mil- 
liseconds. Examples: 

$( 'hi ') .hide (1000) ; //Hide the heading in 1 second 
$ ( 'hi ' ) . showdOOO) ; //Make it reappear in 1 second 
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METHOD NAME 

toggle ( ) 


slideDown { ) 
slideUp 0 
slideToggle ( ) 


fadein ( ) 
f adeOut ( 
f adeTo ( ) 


animate ( 


PURPOSE 

The toggle method uses show and hide internally and changes the display of 
the matched elements. That is, visible items are hidden, and vice versa. Example: 

$(' hi '). toggle (2000) ; // hide or show the hi in 2 seconds 

Just like hide and show, these methods make matched elements appear or dis- 
appear. However, they do this by adjusting the height from its current size to 
zero or vice versa, causing the element to "slide up" or "slide down." The sli- 
deToggle method slides down hidden elements and slides up visible elements, 
which makes it easy to show and hide elements repeatedly with a single action. 
Examples: 

$ ( 'hi' 
$ ( 'hi' 
$('hl' 


. slideUp(lOOO) ; 
.slideDown(lOOO) ; 
.slideToggle(lOOO) 


These methods make the matched elements visible or invisible by chang- 
ing their opacity, f adeOut sets the opacity to 0, making the item completely 
transparent, and then sets the CSS display property to none, hiding the item 
completely, f adeTo lets you specify an opacity (a number between 0 and 1) to 
determine the transparency level of the elements and fadein makes the item 
visible again and sets the opacity to 1. All three methods enable you to define a 
fixed speed {slow, normal, and fast) or a number defining the duration of the ani- 
mation in milliseconds. Examples: 

$ ( 'hi ' ) . fadeOut (1000) ; // dissolve the hi in 1 second 

$(' hi '). fadein (1000) ; // hi reappears in 1 second 

$(' hi '). f adeTo {1000 , 0.5); // fade to semi-transparent 

Internally, animate is used for many of the animation methods like show and 
hide. However, it's also externally available to give you great flexibility in ani- 
mating your matched elements. With the animate method you can specify a 
bunch of properties to animate. Consider this example: 

$ ( 'hi ' ) .animate ({ 

opacity: 0.4, 
marginLeft: '50px', 
fontSize: '50px' 
} , 1500 ) ; 

In one smooth animation with a duration of 1.5 seconds, this code takes the hi 
element and increases its font size to 50 pixels, sets the opacity to 0.4 to make 
the element semi-transparent, and changes the left margin to 50 pixels. The first 
argument of the animate method is an object holding one or more properties 
you want to animate, each one separated by a comma. Notice how you need to 
use JavaScript's marginLeft and fontSize, rather than the CSS margin-left 
and font -size properties. You can only animate properties that take numeric 
values. That is, you can use properties like margin, fontSize, opacity, and so 
on, but not properties like color or f ontFamily. 
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N ow that you've seen the most important jQ uery concepts, from simple selectors to advanced ani- 
mation options, you can usethis i<nowiedgeto mai<e the contact form of the Pianet Wrox sitea iittie 
more attractive. 


TRY IT OUT 


Animating the Contact Form 


In this exercise you apply two main animations: one is triggered when the user submits the contact 
form and slowly slides it up until it disappears. The other animation is used to show and hide the 
M essageSent label, attracting more attention until it completely disappears. 

1 . Start by adding an additional text paragraph below the M essage Sent label in the ContactForm 
.ascx user control in M arkup View. This paragraph will be visible after the form has been submit- 
ted, and remains visible, even after the M essage Sent text has been hidden. W ithin the paragraph 
tags add some text that thanl<s the user for his response. Add id and runat = " serve r" attributes 
to the paragraph (so you can program against it in Code Behind) and set its visible property to 
False. Finally, set the cssciass attribute of the Label control placed before the paragraph to 
Attention. You should end up with this code: 

<asp:Label ID="Message" runat="server" CssClass= "Attention" 

Text= "Message Sent" Visible="False" /> 
<p runat=" server" id="MessageSentPara" visible="False" >Thank you for your message. 
We'll get in touch with you if necessary . </p> 

2. Wrap the entire table that holds the form controls in a <div> and set its id to Tabiewrapper. 
Tables can't be easily resized using siideup and siideDown, but by wrapping the table in a <div> 
you can resize that element instead: 

<div id="TableWrapper"> 

<table class="auto-stylel" runat=" server" id="FormTable"> 

</table> 
</div> 

3. In previous versions of VS, you would not see IntelliSensefor jQuery and other script libraries in 
user controls. That's becauseVS doesn't know in which pages or master page the control will be 
used. Because the script references are added to these pages, the user control doesn't know of their 
existence. You could work around that by adding a reference to the library in the control and hide 
it in a server-side comment, or remove the reference when you deploy your site. H owever, VS 2012 
introduces a much cleaner solution. By adding a JavaScript file with the special name of _refer- 
ences. js to your site, VS gives you IntelliSensefor all script file references it finds in that file. To 
set this up, first add a JavaScript file called references . js to the Scripts folder (right-click the 
folder and choose Add o JavaScript file.) Then from the scripts folder in the Solution Explorer, 
drag j query- 1 . 7 . 2 . j s into the open J avaScript file. VS adds the following code for you: 

/// <reference path=" jquery-1 . 7 . 2 . j s " /> 

Save and close the file. From now on, you'll see Intel I iSense appear for thejQ uery library, no 
matter where you're adding your jQ uery code. Visual Studio looks at the file reference you 
added to this file and looks for matching files with an inteiiisense. js extension, which it 
uses to build up Intel 11 Sense and the documentation tool tips. You can add other references to 
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_references. js as Well to light up I ntelllSense for other JavaScript libraries. I really llkethlsfea- 
ture because It gives you I ntelllSense everywhere without messy hacks or double script references. 
You never have to Include a reference to this special file In the pages or controls In your site; It 
serves purely as a development-time feature. 

4. Back In the user control contactForm.ascx, scroll down to the end of the control's markup, and 
add a <script> element and the following jQuery code that fires when the form Is about to be 
submitted: 

<script type="text/javascript"> 
$ (function 0 { 

$ ( ' form' ) .bind { ' submit ' , function ( ) 
{ 

if (Page_IsValid) 
{ 

$ ( ' #TableWrapper ' ) . slideUp (3000) ; 

} 

}); 
}); 

// Code from step 5 goes here 
</ script> 

5. Right before the closing </script> tag and after the closing curly brace, parenthesis, and semico- 
lon of the jQuery document ready function, add the following bold piece of JavaScript: 

}); 

function pageLoadO 
{ 

$(' .Attention' ) .animate ({ width: '600px' }, 3000). 

animate({ width: 'lOOpx' }, 3000) . fadeOut (' slow' ) ; 

} 

</ script> 

ThepageLoad method (which Is part of the cllent-slde JavaScript made available by ASP. N ET 
AJAX ) serves the same purpose as jQuery's document ready, with one exception: It also fires 
after a partial page update, which Is what takes place after you submit the form because of the 
updatePanei In theuser control. 

6. Switch to Code Behind and add the following line of code to the sendButton_ciick method. This 
code makes the text paragraph visible when the form Is submitted and the e-mall message Is sent: 

VB.NET 

Message. Visible = True 
MessageSentPara. Visible = True 

FormTable .Visible = False 

C# 

Message. Visible = true; 
MessageSentPara. Visible = true; 

FormTable .Visible = false; 


7. Save all your changes and close the user control because you're done with It. 
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8. Open the Monochrome. CSS file from its theme folder and add the following CSS declaration to the 
bottom of the file: 

.Attention 
{ 

border: 4px solid red; 
padding: lOpx 0 ; 
width: lOOpx; 
margin: auto; 
display: block; 
text -align: center; 

} 

9. Copy the same declaration to the DarkGrey theme's CSS file. 

10. Save your changes and then request the Planet Wrox site in your browser. Choose the Contact Us 
item (under About) from the Menu or Treeview control, fill in the form, and clicl< Send. N otice 
how shortly after clicl<ing the button the form slides up slowly until it completely disappears. 
Figure 11-6 shows the form halfway during the siideup operation. 


Get in touch with us 

Use the form below to get in touch with us. Enter your name, e-mail address, and your home or business phone 
number to get in touch with us. 

Name 

|lmar | 

E-mal address 

|imar@spaanjaars com | 

Repeat e-mail address 

|imar@spaanjaars.com { 

iHome phone number 

0800-123456 

r>.,_! 1 1 

- r Please Wait. . 
I* 



FIGURE 11-6 


11. 0 nee the page is done loading, the M essage Sent label and the thank you text appear. N otice how 
the label first grows in size to span the full content width, then shrinks again and finally disappears 
completely. Figure 11-7 shows the message while it's being resized. If you don't see this animation 
appear, press Ctrl-ff 5 or Ctrl-ffl to get a fresh copy of the CSS file from the server and then fill in 
the contact form again. 

Home > About > Contact Us 

Message Sent 

Thank you for your message. We'll get in touch with you if necessary. 
FIGURE 11-7 

How It Works 

A lot of the steps involved in this exercise deal with things you've already seen: adding <div> elements, 
classes, and CSS declarations. H owever, there's some] Query and some Ajax code in this example 
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that's worth examining. First, tal<ea lool< at the code you added in the jQuery document ready 
function: 

$ ( ' form' ) .bind { ' submit ' , function ( ) 
{ 

if (Page_IsValid) 
{ 

$ ( ' #TableWrapper ' ) . slideUp (3000) ; 

} 

}); 

The first iine dynamicaiiy binds some code to the form's submit event. This way, the remainder of the 
code fires when the user ciici<s the Send button. Theclieci< for page_isvaiid is necessary to prevent 
the form from sliding up if the user made a mi stal<e somewhere. Imagine that a user leaves both phone 
numbers empty and clicl<s the Send button. This button then tries to submit the form, causing the form's 
submit event to fire. TheASP.N ET client frameworl< intercepts this event and validates the form, caus- 
ing an alert box with an error message to appear. But even though the form is invalid, it continues to 
handle other submit event handlers, including the one your code set up. If you didn't tal<e precautions, 
the form would slide up, regardless of whether it was valid. This mal<es it impossible for the user to com- 
plete the form. Fortunately, you can check page_isvaiid, which is set to false when the form contains 
invalid data. 0 nly when page_isvaiid returns true will the siideup method hide the form. During a 
three-second period (3,000 milliseconds) the form smoothly slides up until it's no longer visible. 

Then the server code runs and sends out the message as you've seen in previous chapters. Once the 
e-mail is sent, the server code sends bacl< the M essage Sent label and the paragraph. The message is 
then animated through this code, which uses a combination of ASP.N ET AJAX and jQuery: 

function pageLoad ( ) 
{ 

$(' .Attention' ) .animate ( { width: 'SOOpx' }, 3000). 

animate {{ width: 'lOOpx' }, 3000) . fadeOut {' slow' ) ; 

} 

Rather than using jQ uery's $ ( function o to fire code when the page loads, this example uses ASP 
.N ET AJAX 's pageLoad, and for a very specific reason: this event is fired by the Ajax frameworl< when 
the page loadsthe first time, and after every postbacl<, partial or not! This is important, because the 
M essage Sent text is only available after the partial postback caused by the button. N otice that page- 
Load also fires on the initial request of contact .aspx. H owever, in that case, the Label with the 
Attention class is hot present in the page (because its visible property has been set to False which 
results in the control's code not being not sent to the browser) so $ ('.Attention') results in an empty 
matched set and no animation takes place. 

Thecodethat executes here is relatively straightforward. First, using animate { { width: 'eoopx' }, 
3000) the message is animated to have a width of 600 pixels. The animation takes three seconds to 
complete. Q nee the three seconds are over, another chained method animates the message back to 
100 pixels. Finally, the fadeOut method is used to dissolve the message, after which it completely 
disappears. 

Although some of the code looks quite complex, I hope you agree that with jQuery it's relatively easy 
to apply some fancy design makeover to your pages. N ot every page or form should be abused for these 
techniques, but when used sparingly, jQ uery animations can really add some flavor to your website. 
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As you saw in the previous sections, jQ uery is reaiiy powerfui. You can use it to find dements in 
your page, manipuiatetiiem tlirougli code, ciiangetiie appearance of dements and create anima- 
tions. H owever, jQ uery can be used for more tiian tiiat. The remaining section of tiiis ciiapter deais 
witii tiie topic of using jQ uery for vaiidation. 


JQUERY AND VALIDATION 

Remember tlie vaiidation controis you used in Ciiapter 9 to vaiidatetlie contact form? T lie vaii- 
dation controis wori< by generating JavaScript tliat is added to tiie page. The downside of tliat 
approacli is tiiat your page becomes unnecessariiy iarge because a iot of repetitive code is added to 
eacii pagetiiat uses tiiese controis. Tiiedevdopers of ASP.N ET liave tiiougiit of tiiis too and decided 
to ieveragetiie power of jQuery to improve ciient-side vaiidation. Tliey iiavedonetiiistlirougli a 
concept i<nown as unobtrusive JavaScript, wiiere tiiefunctionaiity (tiie code tliat gets executed) iias 
been separated from tiie structure and content of tiie page. Ratiier tiian embedding iarge cliuni<s of 
JavaScript code in tlie page, tiiey iiave written a smaii JavaScript library tiiat uses jQuery under tlie 
iiood to perform tlie vaiidation. Tliis leads to deaner code and reduces the size of the page. For the 
Contact Us page, enabling unobtrusive JavaScript validation decreased the size of the final HTML 
from 20.7 KB to 14.9 KB, a reduction of more than 25 percent. 

Configuring the validation framework to use unobtrusive validation with jQ uery instead of the 
built-in code that is generated is a two-step activity: 

1. Enable unobtrusive validation in the web. config file. 

2. Register the jQuery library with the scriptManager in the Global .asax file. 

T he Global .asax file is a special ASP.N ET file that you add to the root of the site. Inside this file 
you can write code that responds to global events that happen within your application. These events 
work the same as other events you've seen so far, such as the Button's click event. The biggest dif- 
ference is that these events fire for the entire application (your website) and not for a single control 
or page. For example, when your ASP.N ET application starts up, the Appiication_start event is 
fired, enabling you to execute your own code. Qther events that fire IndudeeeginRequest, which 
fires for each request to the site and Appiication_Error, which fires when an unhandled exception 
in your site occurs. You make use of this last event in Chapter 18, which deals with debugging and 
exception handling. 

I n the next exercise you see how to add the Global . asax file to your site and then enable unobtru- 
sive JavaScript validation. 


lUmmg^Q Enabling Unobtrusive JavaScript Validation 

In this exercise you revisit the current Contact Us page to look at the code that the controls generate. 
You'll then add a Global .asax file and enable unobtrusive JavaScript validation so you can seethe 
effect this has on the code that is generated. 

1 . Start by opening the contact .aspx file from the About folder and then press Ctrl-ff 5 to view that 
page in your browser. 
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2. View the HTM L for the page in the browser by right-clicl<ing the page and choosing View Source 
or View Page Source. 

3. Locate the input field for the user's name and then lool< at the code for the validator that is placed 
directly below it. You should see something lil<ethis: 

<span id="cpMainContent_ContactForm_RequiredFieldValidatorl " 

c las s="ErrorMes sage" style=" visibility : hidden; " >*</span> 

4. Scroll down to the end of the code until you seethe large chunl< of JavaScript code that isrespon- 
siblefor the validation. For the N ame field, you'll see something lil<e this: 

var cpMainContent_ContactForm_RequiredFieldValidatorl = document. all ? 
document . all [ "cpMainContent_ContactForm_RequiredFieldValidatorl" ] : 
document . getElementByld ( 

"cpMainContent_ContactForm_RequiredFieldValidatorl" ) ; 
cpMainContent_ContactForm_RequiredFieldValidatorl . control tovalidate 

= "cpMainContent_ContactForm_Name" ; 
cpMainContent_ContactForm_RequiredFieldValidatorl . errormessage 

= "Enter your name"; 
cpiyiainContent_ContactForm_RequiredFieldValidatorl . evaluationf unction 

= "RequiredFieldValidatorEvaluatelsValid" ; 
cpMainContent_ContactForm_RequiredFieldValidatorl . initialvalue = " " ; 

For each of the validation controls you see similar code, all adding to the size of the page. 

5. Go bacl< to VS, right-clicl< the website in the Solution Explorer, and choose Add oAdd New Item. 
Locate the Global Application Class item. You don't have to enter a name because the default of 
Global, asax is the Only allowed name for this file. 

6. Add the following code to theAppiication_start method that is already part of the code tem- 
plate of the Global . asax file: 

VB 

Sub Application_Start (ByVal sender As Object, ByVal e As EventArgs) 
ScriptManager. Scrip tResourceMapping.AddDefinit ion ( "j query" , 
New ScriptResourceDef inition With 

{ .Path = "~/Scripts/jquery-1.7 .2 .min. js" }) 

End Sub 
C# 

void Application_Start (object sender, EventArgs e) 
{ 

ScriptManager . Scrip tResourceMapping.AddDefinit ion ( "j query" , 
new ScriptResourceDef inition 
{ 

Path = "-/Scripts/jquery-1 . 7 . 2 .min. j s" 

} 

) ; 

} 

The spelling of the word j query (all lowercase) is case sensitive, so mal<e sure you type it exactly 
as shown here. If you have a newer version of thejQ uery library, don't forget to update the ver- 
sion number. 
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7. Save your changes and close the file. 

8. N ext, open up the web.config file and modify the following line of code in the <appsettings> 
element. You added that line in Chapter 9. If you don't have this line of code, add it between the 
<appsettings> tags. Either way, you should end up with this code: 

<appSettings> 

odd key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms" /> 

</appSettings> 

9. Open up the master page and change the reference to thejQuery library so it points to the 

ScriptResourceDef inition you Created in the Global . asax file lil<e this: 

<asp : ScriptManager ID="ScriptManagerl" runat=" server" EnablePageMethods="true"> 
<Scripts> 

<asp:ScriptReference Name="j query" /> 
</Scripts> 

</asp : ScriptManager> 

If you didn't mal<e this change, jQ uery would be included twice on pages that use the validation 
controls; once from the code in Global, asax, and once from the reference in the scriptManager 

control. By having the ScriptReference point to the ScriptResourceDef Inltion defined in 

Global .asax, ASP.N ET sees that it's pointing to the same JavaScript library and includes the ref- 
erence only once. 

10. Save your changes and then request contact, aspx in your browser. Clicl< the Send button and 
notice that validation still worl<s. Open up the HTM L for the page and locate the input field for the 
name again. Below that field you should see the following code for the validator: 

<span data-val-controltovalidate="cpMainContent_ContactForm_Name" 
data-val-errormessage="Enter your name" 
id=" cpMainContent_ContactForm_RequiredFieldValidatorl " 
class= " ErrorMessage " data- val= " true " 

data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" 
data-val-initialvalue=" " style="visibility :hidden; " >*</span> 

11. Scroll down to the end of the code. Notice all theJavaScript you saw previously has now gone. 
Instead, at the top of the file you now find a <script> element that points to a JavaScript file (one 
of the linl<s that start with /scriptResource.axd) that contains validation code that uses the 
jOuery library. 

How It Works 

By enabling unobtrusive JavaScript validation, the validation controls generate different code. Rather 
than emitting JavaScript code that carries out the validation, the controls now emit H TM L5 data attri- 
butes on the validation <span>. The H TM L5 specification enables you to make up your own attributes 
on elements as long as you prefix them with data-. The unobtrusive validation frameworl< makes use 
of this feature by adding attributes for things like the error message (in data-vai -error-message), 
and theJavaScript function that needs to be executed to validate the input control (in data-vai- 
evaiuationfunction). When you click thesubmit button, the validation framework kicks in, finds 
all controls that need to be validated, and then uses the data- attributes to determine what needs to 
be validated and how. N ote that other than the validation controls and theJavaScript they generated 
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previously, not much has changed. Your page still contains the same input controls and submit but- 
ton. But the way validation takes place has changed radically, and now uses the jQ uery library and the 
data-attributes added to the HTM L elements. 

To enable unobtrusive validation you have to enable a l<ey in web.config that you previously disabled. 
This l<ey signals the validation frameworl< to switch modes and emit unobtrusive] avaScript code 
instead. Because the validation relies on jQ uery, you also need to register thejQ uery library with the 
scriptManager. Unfortunately, you cannot register the library with the scriptManager control; you 
have to do this in the Global .asax with this code: 

VB 

Sub Application_Start (ByVal sender As Object, ByVal e As EventArgs) 
ScriptManager. ScriptResourceMapping . AddDef inition ( "j query" , 
New ScriptResourceDef inition With 
{ .Path = "~/scripts/jquery-l . 7 . 2 .min. j s" }) 
End Sub 

C# 

void Application_Start (object sender, EventArgs e) 
{ 

ScriptManager . ScriptResourceMapping .AddDef inition ( "j query" , 
new ScriptResourceDef inition 
{ 

Path = "-/scripts/ jquery-1 . 7 . 2 .min. j s" 

} 

) ; 

} 

This code uses an object initializer to create a new instance of the ScriptResourceDef inition 
class. It sets its path property to the path of thejQ uery library. This instance is then added to the 

ScriptManager'S ScriptResourceMapping USing the AddDef inition method. Finally, by pointing the 

ScriptManager control in the master page to this scriptResourceoefinition, jQuery is included on 
all pages in your site. Although this looks a bit funky, the outcome is pretty straightforward: a link to 
the referenced jQuery library is added to the output of the page so the validation framework can use it. 

0 nee you've set this up, you never have to worry about it; you can add validation controls to your page 
as you did before and jQ uery and the validation framework of ASP.N ET will handle all validation for 
you. N otethat this change does not impact server-side validation at all; that will continue to function 
as before. 


If by now you think that jQuery really rocks, I completely agree. Although it may be a bit difficult 
to get used to jQ uery in the beginning, once you get the hang of it you'll wonder how you ever did 
without it. And what's even cooler is that you're not limited to what thejQ uery library supports 
out of the box. jQuery has a pluggable architecture, which means you can write plug-ins for it that 
extend or enhancejQ uery's functionality. At the time of writing, the official jQuery plug-in site 
was taken offline while they were working on a new site. H owever, searching the web for "jQ uery 
plug-ins" should bring up many useful plug-ins for all kinds of purposes, ranging from image gal- 
leries, validation frameworks, visual tooltips, dialog boxes, and more. You're also encouraged to 


418 I CHAPTER 11 JQUERY 


look atjQ uery Ul, a collection of widgets such as tabs, dialog boxes, calendars, draggable content, 
and more. You can find thejQ uery U I project at http: //jQueryui .com. If you lil<ejQuery U I, you 
should also check outJuiceUI (at http://juiceui.com). Juice U I is an open source collection of 
ASP.N ET controls that render jQuery U I elements in the browser. This way, you get the best of both 
worlds: a rich and programmable framework at the server and lean and clean client-side HTML that 
leverages jQuery and jQuery Ul. 

Up until now, you've been working on fairly static web pages. Although jQuery enables you to cre- 
ate dynamically changing pages at the client, the content that's available on the website is still static. 
To fix that, you can use a database, the topic of the next four chapters. In the next chapter you get a 
thorough introduction to databases, and the chapters that follow give you in-depth information on 
working with data in an ASP.N ET environment. 


PRACTICAL TIPS ON JQUERY 

To get the most out of jQuery, follow these short tips: 

>• Experiment and experiment. At first, jQuery is a bit of an odd technique to master, mostly 
because of all its curly braces and parentheses. H owever, by practicing a lot you can become 
a jQuery master in no time. 

>■ Visit the jQuery.com website. Besides very good documentation with many examples show- 
ing off jQuery's capabilities, you also find a wealth of articles and links on using jQuery, 
including links to sites that feature video content. 

>• Invest some time in browsing thejQ uery Ul and Juice U I websites. You may not need what 
they offer right now, or you may feel you're not ready to take that next step yet, but it's good 
to know what these products have to offer when you're building your next website with a 
rich client interface. 

SUMMARY 

in this chapter you were introduced to jQuery, a very popular, open source, client-side JavaScript 
framework for interacting with the document object model. 

The chapter started off by showing you whereto get jQ uery and how to add it to your site. You then 
got a quick example of jQuery, which was followed by an introduction to jQuery selectors and filters 
that enable you to find relevant elements in your page. 

The second part of this chapter was devoted to the numerous methods that jQuery supports to apply 
effects and animations to your matched sets. You saw how to use methods like ess to manipulate 
CSS settings, parent and prev to navigate through the items in your set, and how to work with 
events to fire code in response to some action like the click of a button or when a form is submitted. 

N ear the end of the chapter you learned how to use the many animation methods in jQuery to give 
your page a more compelling and interactive appearance, and you saw how to leverage the power of 
jQuery in theASP.N ET validation framework. 
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EXERCISES 


1. Imagine that you want to offer your users the possibility of hiding a certain region of a page. For 
example, you could offer them a link to hide or show the large banner in the Sidebar element with 
the click of a button. What jQuery does this require? Bonus points if you can find a way to change 
the text that triggers the code from Hide to Show and vice versa. 

2. What's the difference between siideup and siideDown? What important argument do both meth- 
ods accept? 


3. What's the difference between jQuery's document ready function, defined with $ (func- 
tion {)...), and the ASP.NET AJAX pageLoad method? How can you make good use of this 
difference? 

4. What's the purpose of the _ref erences . j s file in the scripts folder? 


You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 

_ref erences . j s The special JavaScript file in the Scripts folder that triggers IntelliSense for 

all JavaScript files it references 

Chaining The concept where the result of one method is used as the input of another 

to create a chain of effects 

Filters Enable you to further refine your jQuery matched set of elements 

Global . asax a central file that is used to handle various application-scoped events such 

as Application_Start, Application_Error, and more 

jQuery A popular client-side JavaScript framework that simplifies working with the 

DOM, visual effects, event handling, and Ajax functionality 

IVIatched set The set of elements that are returned by a jQuery selector 

NuGet The Library Package Manager for Visual Studio to help you manage third- 

party libraries in your .NET websites and projects 


Selectors 


A CSS-like syntax to find elements in your page using jQuery 


Introduction to Databases 


WHAT YOU WILL LEARN IN THIS CHAPTER: 


>• What a database is and which databases are typically used with ASP 
.NET pages 

>• What SQL is, how it looks, and how you use it to manipulate data 

>• What database relationships are and why they are important 

>• Which tools you have available to manage database objects (such as 
tables) and how to use them 

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 
www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the C hapter 12 download. 

Being able to use a database in your ASP. N ET websites is just as critical as understanding 
HTML and CSS: it'salmost impossibleto build a modern, full-featured website without it. 
Databases are useful because they enableyou to storeand retrievedata in a structured way. The 
biggest benefit of databases is that you can access them at run time in your site, which means 
you are no longer limited to just the relatively static files you create at design time in Visual 
Studio. You can use a database to store reviews, musical genres, pictures, information about 
users (usernames, e-mail addresses, passwords, and so on), log information about who reads 
your reviews, news articles, and much more, and then access that data from your ASPX pages. 

This gives you great flexibility in the data you present, and the way you present it, enabling 
you to create highly dynamic websites that can adapt to your visitors' preferences, to the con- 
tent your site has to offer, or even to the roles or access rights that your users have. 

To successfully work with a database in an ASPX page, this chapter teaches you how to access 
databases using a query language called SQ L — or Structured Q uery Language. This language 
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enables you to retrieve and manipulate data stored in a database. You also see how to use the data- 
base tools to create tables and queries. 

Although ASP.N ET and the .N ET Framework offer you many tools and technologies that enable 
you to work with databases without requiring a firm knowledge of the underlying concepts like 
SQL, it'sstill important to understand them. Once you know how to accessa database, you'll find it 
easier to understand and appreciate other technologies, like the A DO. N ET Entity Framework (dis- 
cussed in Chapter 14), which provides easier access to database operations directly from code. 

In the chapters that follow, you apply the things you learn in this chapter. In Chapter 13, you see 
how to use built-in controlsto work with data in your database. In Chapter 14, you learn how to 
use the AD O.N ET Entity Framework as an additional layer on top of your database to access data 
in an object-oriented way with minimal code. Chapter 15, the last of the data-focused chapters, 
shows you advanced techniques for working with data. 

In the following sections, you see what a database is, and what different kinds of databases are 
available to you. 

WHAT IS A DATABASE? 

By its simplest definition, a database is a collection of data that is arranged so it can be accessed, 
managed, and updated easily. For the purposes of this book, and the websites you will build, it's 
also safeto assume that the data in the database is stored in an electronic format. 

The most popular type of database is the relational database. It's the type of database that is fre- 
quently used in websites and is also the type of database that is used in the remainder of this book. 
H owever, the relational database is not theonly one. Other types exist, including flat-file, N oSOL, 
object-relational, and object-oriented databases, but these are less common in Internet applications. 

A relational database has the notion of tables, where data is stored in rows and columns, much like 
a spreadsheet. Each row in a table contains the complete information about an item that is stored 
in the table. Each column, on the other hand, contains information about a specific property of the 
rows in the table. 

The term "relational" refers to the way the different tables in the database can be related to each 
other. Instead of duplicating the same data over and over again, you store repeating data in its own 
table and then create a relationship to that data from other tables. Consider the table called Review 
in Figure 12-1. Thistablecould store the album reviews that are presented on thePlanetWrox website. 



Id 

Title 

Name 

CreateDateTime 


> 

23 

Sonic Youth; Daydream Nation live in Roundhouse, London 

Indie RocIt 

2007-11-14 17;19:12.000 



24 

Sonic Youth; Daydream Nation live at Lowlands, Biddinghuizen 

Indie Rock 

2007-ll-1417;27:58.000 



25 

Norah Jones - Not Too Late 

Jazz 

2008-02-15 21;05:54000 



26 

DJ Tiesto - In Search of Sunrise 6 

Techno 

2008-03-04 14;1 2:37,000 



27 

DJ Tiesto - Elements of Life 

Techno 

2008-03-05 21:12:02,000 



28 

Death Magnetic by Metallica 

Hard Rock 

2008-09-12 14:51:13,000 




29 

Day & Age by The Killers - Excellent album, but is it better than before? 

Indie Rock 

2008-11-24 22:01:36.000 

V 

a 


1 

of 22 ► ^1 . Cell is Read Only. 





FIGURE 12-1 


Different Kinds of Relational Databases | 423 


As you can see in Figure 12-1, eacli review is assigned to a musicai genre sucli as Pop, lnclieRoci<, 
or Teciino. But wiiat if you wanted to renametiie genre Teciino to sometiiing iii<e H ardcoreTeclino? 
You wouid need to update aii tlie rowstiiat liavetiiis genre assigned. If you iiad otiier tabiestiiat 
stored a genre, you wouid need to visit tliose tabies as weii and mai<e tlieclianges manuaiiy. 

A mucii better soiution wouid be to usea separate tabie and caii it Genre, for exampie. Tiiistabie 
couid store tiie name of a genre and an ID (a sequentiai number, for exampie) tiiat uniqueiy identi- 
fies eacii genre. Tlie Review tabie tiien iias a reiationsiiip to tiie Genre tabie and stores oniy its ID 
instead of tiie entire name. Tiie Genre tabie aiso iias a sortorder coiumn, wiiicii is used in iater 
exampies. Figure 12-2 siiows tiie modei for tiiis ciiange. 


Review 


? Id 


Title 


Summary 

Body 


Genreld 


Authorized 


CreateDateTime 

UpdateDateTime 





Genre 


<i? Id 
Name 
SortOrder 


FIGURE 12-2 


Witli justtiielD of tiie genre now stored in tlie Review tabie, it's easy to rename a genre. Aii you 
need to do is ciiange tiie name of tiie genre in tiie Genre tabie, and aii tabies witii a reiationsiiip 
to tiiat genre pici< up tiieciiangeautomaticaiiy. In database terminoiogy, botii id coiumns in tiiis 
exampie are primary i<eys (identified by tiie ioci< icon) and are used to uniqueiy identify eacii row 
in tiie tabie. Genreid, on tiieotiier iiand, is a foreign i<ey wiiicii is used to iini< baci< to a primary or 
otiierwise unique i<ey in a tabie. Later in this chapter, you see how to create and mai<e use of reia- 
tionships in your reiationai database. 


DIFFERENT KINDS OF RELATIONAL DATABASES 

You can use many different i<inds of databases in your ASP.N ET projects, induding M icrosoft 
Access, SQL Server, Oracie, SQLite, and M ySQL. H owever, the most commoniy used database in 
ASP.N ET websites is probabiy M icrosoft SQL Server. This booi< focuses on using the M icrosoft 
SQL Server 2012 Express LocaiDB edition, because it's free, comes bundied with VS 2012 and has 
a iot to offer out of the box. Aiso, because the database format is identicai to that of the commerciai 
versions of SQL Server 2012, it's easy to upgrade to those versions at a iater stage in thedeveiop- 
ment cyde. This upgrade path is described in moredetaii in Appendix B. 

The oniy probiem with LocaiDB is that you can't use aii of the database management toois inside 
Visuai Studio. You can create tabies and other database objects, but you can't create new queries 
and diagrams, two features that you'ii use reguiariy when wori<ing with databases in your ASP.N ET 
projects. 
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To overcome this limitation, you sliouid downioad and install SQ L Server M anagement Studio 
(SSM S) Express, the free tools to manageall your SQL Server databases, including LocalDB, 
Express, and the commercial versions of SQ L Server (although in the latter case you probably want 
to use the more feature rich version of thetoolsthat ship with the main product.) 

In the next sectionsyou see how to acquireand install SQL Server M anagement Studio Express. 
The sections that follow then show you how to use it to manage your databases and the data they 
contain. 


NOTE Installing SQL Server and SSMS can be tricky. If you get stuck, be sure 
you visit this book's forum at http : //p2p . wrox . com to find a helping hand. 


Installing SQL Server 2012 Express 

You can download SQL Server M anagement Studio Express from the following page at the 
M icrosoft site: http: //tinyuri .com/sqiExpress2oi2. If this linl< no longer worl<s, you can go to 
www.microsoft.com/express/database/ instead and clicl< the Download button. Alternatively, 
you can go to the main downloadspageatwww.microsoft.com/downioads and search for "SQL 
Server 2012 M anagement Studio Express." 

In all cases, makesureyou download and install the 2012 version of M anagement Studio, and not 
an older version. Also, if you don't have SQL Server Express installed, download the pacl<age that 
contains both the Express database engine and the M anagement Studio tools (it should have a name 
such as Express with Tools or something similar.) You don't need it in the exercises in this and the 
next three chapters, but it's used in Appendix B that shows you how to configure other versions of 
Visual Studio. It's quite a large download (around 700 M B if you choose Express with Tools) but 
well worth the time downloading. 

After you have downloaded the M anagement Studio setup file (optionally with the Express data- 
base engine included), run the installer and follow the on-screen instructions. When asl<ed for the 
Installation Type, choose for a N ew SQL Server stand-alone installation. This option enables you 
to choose M anagement Tools as a component to install later in the Setup Wizard. If you're also 
installing the database engine, accept sqiExpress as the name for the instance. If that name is 
already taken, it means you already have SQL Server Express installed locally. If this version is SQL 
Server 2012 (use the Programs and Features option of the control panel in Windows to find out), 
you can skip installing the Database Engine Services components. If you have a different version 
installed, you can still install SQL Server 2012 side by side. In that case, choose a name such as 
sqi2oi2Express for the named instance. From then on, use this name whenever this book refers to 
SqiExpress as the named instance. 

N ow that SQL Server M anagement Studio is installed, it's time to look at ways to manage data in 
SQL Server database. SQL Server supports a query language called SQL that lets you do just that. 
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USING SQL TO WORK WITH DATABASE DATA 

To get data in and out of a database, you need to use Structured Q uery Language (SQ L). This is 
tliedefacto language for querying relational databases that almost all relational database systems 
understand. A number of clear standards exist, with the most popular one being the AN SI 92 SQL 
standard. Besides the grammar that this standard supports, many database vendors have added their 
own extensions to thelanguage, giving it a lot more flexibility and power on their own system, at 
the cost of decreased interoperability with other systems. 

M icrosoft SQ L Server 2012 is no exception, and supports most of the grammar that has been 
defined in the AN SI 92 SQL standard. Q n top of this standard, M icrosoft has added some propri- 
etary extensions. Collectively, the two are referred to asT-SQ L , or Transact SQ L . I'll stick to the 
term SQ L for the remainder of this book. 

In the following sections, you see how to use SQL targeting a SQL Server 2012 database to retrieve 
and manipulate data in your database. H owever, before you can write your first SQL statement, you 
need to know how to connect to your database first. The following exercise shows you how to create 
a sample database from a SQL script file that comes with the downloadable code for this book. 


TRY IT OUT 


Creating the SQL Server Sample Database 


Connect to Server 


^^^^ Mittosoft' 

^ SQLServer20i2 


in this exercise you learn how to create and work with a database using Visual Studio. To give you 
something to work with, the code download for this chapter contains a SQL script that creates two 
tables and a few sample rows in your database. You can use these rows to test out the SQL queries that 
are shown throughout this chapter. This database is used only for this chapter, and, as such, you don't 
have to create it to follow along with the Planet Wrox website. H owever, by creating it with thefollow- 
ing instructions you have a nice test database to test out SQL queries. 

1. Start by creating a folder called Databases in 
the root of your C drive. This serves as a nice 
central location for your databases, which 
makes them easier to manage. If you decide to 
use a different location, make sure the folder is 
not located in your Documents folder or you'll 
run into permissions problems later. It's rec- 
ommended to use C : \Databases for the 

walk-throughs in this book. 

2. Start SQ L Server M anagement Studio from the 
Windows Start menu or Start screen. 

3. Log in to the SQL Server Local DB instance 
by entering (iocaidb)\vii.o in the Server 
Name field as shown in Figure 12-3, and click 
Connect. 


bervei lypc. 
Ser/er name: 
Authentjcation: 
Usei name: 
Password: 


I Dafaba:? Engine 


I IBBIil:im»il 


Windows Authentication 


VPC2012RTM\lmat 


r~l Remembei password 


Connect 


irancel 


Help 


Options » 


FIGURE 12-3 
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4. After you log in to the database, you should seethe 
Object Explorer (shown in Figure 12-4) on the left. If 
you don't see it, choose View o Object Explorer from 
the main menu or press F8. 


Object Explorer 
Connect' ^ 


(LocalDB)\v1 1 .0 (SQL Seiver 1 1 .0.21 00 ■ VPC201 2RTM\lm3r) 


Li 

1+; LJ Databases 
S 1^ Security 
gi C3 Server Objects 
E Replication 
(+ □ Management 


FIGURE 12-4 


Right-click the Databases node (visible in Figure 12-4) 
and choose N ew Database. Type PlanetWroxTemp 
as the name. Don't use PlanetWrox as the name, 
because you'll be using that for later exercises in the 
bool<. In the Database Files section of the screen, type c:\Databases in the Path column for both 
rows. You may need to scroll to the right to seethe Path column. Your dialog box should end up 
as shown in Figure 12-5. 


Select a page 

_^ General 
Options 
Filegroups 


I Connection 

Server: 

(LocalDB)Vvll.O 

Connection: 
VPC2012RTMMma[ 

^ View connection properties 


Progress 


Ready 


New Database 


^ Script " iLj Help 

Database name: 
Owner: 


PlanetWroxTemp 


<detault> 


l-fext indexing 


Database ties: 


Logical Name 
PlanetV/roxTemp 
PlanetWroxT emp_log 


File Type 
Rows Data 
Log 


Ftlegroup 
PRIMARY 
Not Applicable 


Initial Size (MB) 

3 

1 


Autogrowth / Maxsize 

Byl MB. Unlimited 

By 10 percent. Unlimited 


Path 

[TT] CADatabases 
I ... I C:\Databases 


FIGURE 12-5 


Clicl< OK to create the database. 

6. Press Ctrl-fO to bring up a dialog box that lets you select a file. Browse to the folder 

C : \BegASPNET\Resources \chapter 12. If you don't have this folder, refer to the Introduction of 
this bool< to learn how to acquire the code that comes with this bool<. Select the create pianet 

Wrox Database . sql file. 
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7. On the SQL Editor toolbar (shown in Figure 12-6) select the PianetWroxTemp database from the 
drop-drown list. 

i= Planet Wrox Database.sql - (LocalDB)\v1 1 .0.master (VPC201 2RTM\lmar (52)) - Microsoft SQL Server M... Lr_ 

File Edit View Query Project Debug Tools Window Help 

I J • i_i J I j^NewQueiy uj -ilSl ni S ^\ * 

'It Execute f Debug ^ ^ 1"$ B-' ^ \ F ''k' & t*\ 'Q \ 'Z '2= if 



Li (Lo PlanetWroxTemp 


B a tennpdfa 

H lJ i>ystem Databases 
B a PlanetWroxTemp 

B Security 

B □ Server Objects 

IB Cj Replication 

g L-J Management 


lOO-VPC2012RTM\lmar) 


Planet Wrox Datab...201 2RTM\lmar (52)) X 

/""" object: Table [dbo]. [Genre 


SET ANSI_NULLS ON 
GO 

SET QIX)TED_IDENTIFIER ON 
GO 

BCREATE TABLE [dbo] . [Genre] ( 

[Id] [int] IDENTITY(1,1) NOT NULL, 
[Name] [nvarchar] (200) NOT NULL, 
[SortOrder] [int] HOT IIU^^, 
CONSTRAINT [PKGenre] PRIMARY KEY CLUSTERED 



FIGURE 12-6 


8. 


9. 


This mal<es the PlanetWroxTemp database the active database, so any queries you execute in the 
query editor window will target that database. 

Clicl< the Execute button on the SQL Editor toolbar or press F5. This executes the query and cre- 
ates two tables along with some sample rows. Y ou can tal<e a lool< at the SQ L statements if you 
want; the concept of inserting the sample rows is explained later in this chapter. 


Qn theQbject Explorer, clicl< the Refresh icon 
on the toolbar and then expand Databases, then 
your new database, and then the Tables node. Y ou 
should see the Genre and Review tables appear as 
shown in Figure 12-7. 


How It Works 


Object Explorer 
Connect* ^ 


(J (LocalDB)\vl 1 .0 (SQL Server 1 1 .0.21 00 - VPC201 2RTM\lmar) 
- Databases 

+ I System Databases 

+ i Database Diagrams 

i- ^ Tables 

+ __j System Tables 
+ FileTables 
+ J dbo. Genre 
+ _3 dbo. Review 
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In this exercise you created a new database called 
PlanetWroxTemp and stored it in the folder 
c:\Databases. The SQL fileyou executed against this 
database contains SQL code to create two tables called 
Genre and Review. The exact SQL code to create these tables is not so important now; later in this 
chapter you learn how to create your own tables using SSM S. Thefilecontains SQL insert statements 
to add data to these tables. You learn more about the insert statement in the "Creating Data" section 
later in this chapter. 


W hen you have a connection to your database in SSM S, you can worl< with the objects it 
contains. In the next section you see how you can access and change the data in the tables in 
your database. 
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RETRIEVING AND MANIPULATING DATA WITH SQL 

W hen interacting witli databases, you'll spend a good deal of time retrieving and manipulating data. 
M ost of it comes down to four distinct types of operations, grouped under theCRU D acronym: 
Create, Read, Update, and Delete. 

Because these data operations are so crucial, the next couple of sections show you how to use them 
in detail. 

Reading Data 

To read data from a database, you typically use a few different concepts. First, you need to indi- 
cate the columns that you want to retrieve from the table you are querying. You do that with the 
SELECT statement. You need to indicate the table(s) you want to select the data from using the from 
l<eyword. Then you need a way to filter the data, making sure only the rows you're interested in are 
returned. You can filter the data using the where clause in the SQL statement. Finally, you can order 
your results using the order by clause. 

Selecting Data 

To read data from one or more database tables, you use the select statement. I n its most basic 
form, the select statement looks lil<e this; 

select ColumnName [, OtherColumnNames] FROM TableName 

Here, the parts between the square brackets are considered optional. For example, to retrieve all 
rows from the Genre table and select only their id and Name columns, you use this SQ L statement: 

select Id, Name FROM Genre 

Right after the select statement comes a comma-separated list of column names. You can have 
only one or as many columns as you like here. Instead of specifying the column names explicitly, 
you can also use the asterisk (*) character to indicate you want all columns to be returned. H owever, 
using select * is usually considered a poor programming practice as you're usually selecting more 
columns than you need, causing unnecessary overhead. It's better to define each column you want to 
retrieve explicitly. If you want to rename the column in the result set, you use the as keyword, like 
this: 

select Id AS Genreld, Name FROM Genre 

To limit the number of rows retrieved from a table, you use the top keyword followed by the maxi- 
mum number of rows. To get predictable results, you typically use an order by clause. Without 
that, the order of rows is not guaranteed and top may return different results each time you call it. 
H ere'sa quick examplethat retrieves the first three genres: 

select top 3 Id, Name FROM Genre ORDER BY Name 

SSM S by default uses top 200 to limit the number of rows retrieved when you open a table. 

R ight after the from keyword, you specify the name of the table from which you want to retrieve 
data. The previous example showed only one table (the Genre table), but you see later that you can 
also specify multiple tables usingjoins. 
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NOTE Although the SQL language is not case sensitive, it's common practice to 
write all keywords such as select and from in all caps. Additionally, this book 
uses Pascal casing— where each new word is capitalized— for names of tables, 
columns, and so on. For example, the date and time a certain review is created 
are stored in a column called CreateDateTime in the Review table. 


Filtering Data 

To filter data, you use the where clause, with which you indicate the criteria that you want your data 
to match. For example, to retrieve the ID of the Grunge genre you use the following SQL statement: 

SELECT Id FROM Genre WHERE Name = 'Grunge' 

N otethat the word Grunge is wrapped in single quotes. This is required for text data types and 
dates when you filter data or want to send values to an insert or update statement that enables 
you to create new or change existing rows, as explained later. You can't use them for numeric or 
boolean types, though, so to get the name of the genre with an ID of 8 you would use the following 
statement: 

SELECT Name FROM Genre WHERE Id = 8 


The preceding two examples show a where clause that uses the equals operator for an exact match. 
H owever, you can also use other operators for different criteria. The following table lists a few pop- 
ular comparison operators you can use in your where clauses. 


OPERATOR 

DESCRIPTION ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^1 


The equals operator matches only when the left side and the right side of the com- 
parison are identical. 

> 

The greater than operator matches when the left side of the comparison represents a 
larger value than the right side. 

- 

The greater than or equal operator matches when the left side of the comparison is 
equal to or larger than the right side. 

< 

The less than operator matches when the left side of the comparison represents a 
smaller value than the right side. 

< = 

The less than or equal operator matches when the left side of the comparison is 
equal to or smaller than the right side. 

<> 

The not equals operator does the reverse of the equals operator and matches when 
the left side and the right side of the comparison are different. 


To combine multiple where criteria, SQL supports a number of logical operators such as and and or. 
In addition, it supports other operators to search for text and to specify ranges. The following table 
lists a few of the operators and describes what they are used for. 
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OPERATOR 

DESCRIPTION 

AND 

Enables you to join two expressions. For example, the WHERE clause WHERE id > 20 
AND Id < 30 gives you all rows with IDs that fall between 20 and 30 (with 20 and 30 
themselves not included). 

OR 

Enables you to define multiple criteria of which only one has to match (although more 
matches are allowed). For example, this where clause where Genreid = 5 OR 
Genreld = 8 gives you all the rows with a Genreid of 5 or 8. 

BETWEEN 

Enables you to specify a range of values that you want to match with a lower and upper 
bound. For example, where id between 10 and 35 gives you all rows whose IDs 
are between 10 and 35 (including 10 and 35 themselves if they exist in the database). 

LIKE 

Used to determine if a value matches a specific pattern. You can use wildcards like % to 
match any string of zero or more characters, and the underscore ( ) to match a 
single character. For example, the where clause where Name like '%rock%' 
returns all genres that have rock in their name, including Indie Rock, Hard Rock, and 
so on. 


If no rows match the where clause, you don't get an error, but you simply get zero results back. 

After you have defined your filtering requirements with the where clause, you may want to change 
the order in which the results are returned from the database. You do this with the order by clause. 

Ordering Data 

The order by clause comes at the end of the SQL statement and can contain one or more column 
names or expressions, which can optionally include asc or desc to determine if items are sorted in 
ascending order (with asc, which is the default if you leave out the keyword) or in descending order 
(using DESc). 

For example, to retrieve all genres from the Genre table and sort them alphabetically by their name 
in ascending order, you can use this SQL statement: 

SELECT Id, Name FROM Genre ORDER BY Name 

Because ascending is the default order, you don't need to specify the asc keyword explicitly, 
although you could if you wanted to. The next example is functionally equivalent to the preceding 
example: 

SELECT Id, Name FROM Genre ORDER BY Name ASC 

If you wanted to return the same rows but sort them in reverse order on their Name column, you use 
this syntax: 

SELECT Id, Name FROM Genre ORDER BY Name DESC 

You can order by columns in the order by statement that are not part of the select statement as 
shown in this snippet: 

select Id, Name FROM Genre ORDER BY SortOrder DESC 
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In the next exercise, you see how to perform a number of queries against the sampie database, giv- 
ing you a good idea of how different queries affect the resuits returned from the database. 


TRY IT OUT 


Selecting Data from the Sample Database 


In this exercise you use the database that you created in an eariier exercise. This database is used oniy 
for the sampies in this chapter, so don't worry if you mess things up. N otethat aii the exercises in this 
chapter use SQL Server M anagement Studio to wori< with your database. In later chapters you see how 
to useVS to connect to your SQL Server database as weii. 

1 . Q pen up SQ L Server M anagement Studio if you don't have it open anymore and log in to 

(locaidb) \vii . 0 as shown eariier. Expand the Databases node, then your PianetWroxTemp 
database, and then the Tables node. You should see the two tables. Genre and Review, as shown 
earlier in Figure 12-7. 


Right-clicl< the Genre table and choose Edit Top 200 
Rows. In the Document Window you should now see a list 
with all the available genres in the Genre table, shown in 
Figure 12-8. 

N otethat this is not just a list with all the rows in the 
Genre table. It's actually the result of a SQ L select query 
that is executed when you open the window. To seethe 
query behind this list, ensure that the Query Designer 
toolbar, shown in Figure 12-9, is displayed on-screen. If 
the toolbar isn't visible, right-clicl< an existing toolbar and 
choose Query Designer. 

Qn thistoolbar, clicl< the Show Diagram pane, the 
Show Criteria pane, and the Show SQL pane buttons to 
open their respective windows. The first four buttons 
on the toolbar should now be in a pressed state and the 
Document Window is split in four regions, with each region corresponding to one of the 
buttons on the toolbar. Figure 12-10 shows the entire 
Document Window with the four panes. SQLPane 
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Verify SQL 
Syntax 


The SQL pane displays the SQL statement that is 
used to retrieve the genres that are displayed in the 
Results pane. In thiscase, the SQL statement reads 

SELECT TOP (200) Id, Name, SortOrder FROM 

Genre to retrieve all columns and the first 200 rows 
from the table, but you can easily change that. 

3. In the SQL pane, modify the query as follows: 

SELECT Id, Name, SortOrder FROM Genre WHERE Id 
> 4 


Diagram 
Pane 


Cliange Type 
of Query 


Add Table 


JU S!l a I Change Type- | ! |a^ | (1= 


1 , 


Criteria 
Pane 


Execute 
SQL 


t 


Results 
Pane 


Add 
Group By 


Add 
Derived 
Table 


FIGURE 12-9 


4. To make sure the SQL statement is valid, clicl< the Verify SQL Syntax button on the toolbar and fix 
any errors your SQ L statement may contain. N ext, clicl< the Execute SQ L button (the one with the 
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red exclamation mark on it) or pressCtri4fl. In both cases, the SQL statement isexecuted and the 
Results pane is updated to show all genres with an ID larger than 4. In your SQL pane, the query 
is now split over multiple lines to improve legibility. The SQL language enables you to spread your 
statements over multiple lines without the need for a line continuation character. 
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5. N ow take a look at the Diagram pane— the top part of the dialog box in Figure 12-10 that shows 
your table diagram. In the Diagram pane you can check and uncheck column names to determine 
whether they end up in the query. Deselect the sortorder column (don't accidentally change the 
check mark of theQutput column in the Criteria pane instead). N otethat it also gets removed 
from the Criteria pane and the SQL statement in the SQL pane (visible in Figure 12-11). 

6. Take a look at the Criteria pane in Figure 12-11. It shows the two columns you are selecting. In the 
Filter column it shows the expression that filters all genres with an ID larger than 4. 

In this pane you can modify the query without manually writing a lot of code. To see how you 
can apply an additional filter, type like '%rock%' in the Filter cell for the Name row. This limits 
the results to all genres that contain the word rock and that have an ID that is larger than 4. If 
you press Ctrl-ffl again, the Results pane is updated to reflect the change in the query. 

N otice how Visual Studio added an N before your search term (see Figure 12-12). You see why 
this is in the H ow it Works section following this exercise. 

7. To determine the sort order, you can use the Sort Type column. You can do this for visible col- 
umns (those that have their Qutput check box checked end up in the final result set) but also for 
other columns. To order by the sortorder column, click the cell under Name once. It changes and 
now shows a drop-down list instead. Choose sortorder from the drop-down list. When you click 
or tab away from the field, SSM S places a check mark in the Qutput column. You can click that 
check mark to remove the column again from the output so it remains available for ordering and 
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filtering, but won't sliow up in tlie query resuits. H owever, for tliis exercise you sliouid leave tliat 
column selected. 
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8. In the Sort Type column, choose Descending from the drop-down list for the sortorder. Your 
final Criteria pane now looks lil<e Figure 12-12. 



Column 

Alias 

Table 

Output 

Sort Type 

Sort Order 

Filter 


Id 

Genre 

0 



>4 p 


Name 

Genre 

s 



LIKE N'%rocl<%' 


SortOrder 

Genre 


Descending 

1 


<l 



III 


1 


> 



FIGURE 12-12 


W hileyou make your changes using the Diagram and Criteria panes, SSM S continuously updates 
the SQL pane. Your final SQL statement should now include the extra where clause and the order 
BY statement: 

select Id, Name, SortOrder 
FROM Genre 

WHERE (Id > 4) AND (Name LIKE N'%rock%') 
ORDER BY SortOrder DESC 

9. Press Ctrl-hR again (or click the Execute SQL button on 
the toolbar) and the Results pane shows the rows from the 
Genre table that match your criteria, visible in Figure 12-13. 

N otethat the rows are now sorted in descending order 
based on the sortorder column. figure 12-13 
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How It Works 

The Q uery Designer in SSM S is a very lielpful tool for creating new queries against your database. 
Instead of liand-coding tlie entire SQL statement in tlieSQL pane, you use tlie Diagram and Criteria 
panes to create your queries visually. Of course, you can still use the SQL pane to make manual tweal<s 
to the SQL code that SSM S generates for you. 

The final query you executed returned all the rows that contain the word rocl< and that had an ID 
larger than 4. The query shown in step 8 has a where clause that consists of two parts: the first part 
limits the rows returned to those with an ID larger than 4. The second part filtered the rows to those 
that contain the text rocl<. The two criteria are both applied at the same time using the and l<eyword, 
so only rows with an ID larger than 4 and the word rock in their name are returned. Effectively, this 
returns the Alternative Rock, Indie Rock, and Rock genres, while leaving out the H ard Rock genre 
because it has an ID of 4. SSM S adds the capital letter N in front of the filter text to indicate this is 
a Unicode data type. The Unicode data type enables you to store text for many different foreign lan- 
guages. In your own queries you can usually leave out the N because SQL Server will figure it out for 
you. For more information on theN , check out this article: http://tinyuri.com/39s8wn7. 

At the end, the result set is sorted in descending order on the sortorder column using the syntax 
ORDER BY Sortorder DESc. N otice that sortorder i s an arbitrari ly chosen name. You Can easi ly give 
this column a different name, or order on a different column like the Name column to retrieve the genres 
in alphabetical order. 


In this example, you saw how to retrieve data from a single table. H owever, in most real-world 
applications you get your data from multiple tables that are somehow related to each other. You 
define this relationship in your SQL syntax using the join keyword. 

Joining Data 

A JOIN in your query enables you to express a relationship between one or more tables. For exam- 
ple, you can use a join to find all the reviews from the Review table that have been published in 
a specific genre and then select some columns from the Review table together with the Name of the 
genre. 

The basic syntax for a join looks like the following bolded code: 

SELECT 

SomeColumn 
FROM 

LeftTable 

INNER JOIN RightTable ON LeftTable . SomeColumn = RightTable . SomeColumn 

The first part is the standard select part of the query that you saw earlier, and the second part 
introduces the keywords inner join to express the relationship between the two tables. This 
query only returns the rows in the table LeftTable with a corresponding row in RightTable. For 
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example, to return the I D and the title of a review together with the name of the genre it belongs to, 
you use this SQL statement: 

SELECT 

Review. Id, Review. Title, Genre. Name 
FROM 
Review 

INNER JOIN Genre ON Review . Genreld = Genre. Id 

N otethat in the select statement each column is prefixed with the table name. This mal<es it clear 
what tableyou are referring to and avoids conflicts when multipletables have similar column names 
(like the id column that exists in both tables). 

In addition to an inner join that returns only matching rows, you can also use an outer join. 
The OUTER JOIN enables you to retrieve rows from one table regardless of whether they have a 
matching row in another table. The following example returns a list with all the genres in the system 
together with the reviews in each genre: 

select 

Genre. Id, Genre. Name, Review. Title 
FROM 
Genre 

LEFT OUTER JOIN Review ON Genre. Id = Review . Genreld 

For each review assigned to a genre, a unique row is returned that contains the review's title. 

H owever, even if a genre has no reviews assigned, the row is still returned as shown in Figure 12-14. 



Id 

Name 

Title 



5 

Indie Rock 

Sonic Youth; The Eternal - Takes time to get used but th,.. 



5 

Indie Rock 

Farm by Dinosaur Jr 



6 

Punk 

21st Century Breakdown by Green Day 



7 

Rock 

HULL 



8 

Grunge 

NULL 



9 

Alternative Rock 

Love Hate &Then There's you by The Von Bondies 



1 

of26 ► H ' 

Cell is Read Only. 



FIGURE 12-14 


The genre Indie Rock is repeated multiple times, once for each review in the Review table that has 
been assigned to that genre. The Punk genre has only one review attached to it, so it's listed only 
once. Finally, the Rock and Grunge genres have no reviews associated with them. However, because 
the SQL statement uses a left outer join, those two genres (listed on the left side of the join) are 
still returned. Instead of the Title of a review, that column now contains a null value to indicate 
there is no associated review. 

Besides the LEFT outer join, there is also a right outer join that returns all the rows from the 
table listed at the right side of the join. 
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In addition, you can use otiier joins inciuding crossjoins and seif joins. For a detaiied descrip- 
tion of tliese types of joins, pici< up a copy of the book Beginning M icrosoft SQ L Server 2012 
Programming by Paui Ati<inson and Robert Vieira, Wrox, 2012 (ISBN : 978-1-1181-0228-2). 

You see iiow to use a very common type of join, tiie inner join, in tiie next Try It Out. 


TRY IT OUT 


Joining Data ] 


To join data from two tabies, you need to write a join statement in your code. To lieip you write tlie 
code, SSM S adds a join for you wiienever you add reiated tabies to tiie Diagram pane. H owever, some- 
times tiiis join is not correct, so you'ii need to clieci< tlie code to see if it's oi<ay. 

1 . Still in your test database in SSM S, right-clicl< the Review table and choose Edit Top 200 Rows. 
You'll see all the reviews in the table appear. N ext, enable the Diagram, Criteria, and SQL panes 
by clicl<ing their respective buttons on the Query Designer toolbar. 

2. Right-clicl< an open spot of the Diagram pane next to the Review table and choose Add Table. 
Alternatively, choose Query Designer o Add Table from the main menu. 

3. In the dialog box that opens, clicl< the Genre table and then clicl< the Add button. Finally, click 
Close. 

4. The SQL statement that SSM S generated lool<s lil<ethis: 

SELECT TOP (200) Review. Id, Review . Title , Review . Summary , Review. Body , 

Review. Genreld, Review. Authorized, Review. CreateDateTime, Review. UpdateDateTime 
FROM Review 

INNER join Genre ON Review . Genreld = Genre. Id 

SSM S correctly detected the relationship defined in the database between the oenreid column of 
the Review table and the id column of the Genre table, and applied the correct join for you. 

5. To see how you can create joins yourself without writing code directly, you'll manually re-create 
the JOIN. First, right-clicl< the line that is drawn between the two tables in the Diagram pane and 
choose Remove. The SQL statement now contains a cross join. 

6. Next, clicl< the Genreld column of the Review table in the Diagram pane once and drag it onto the 
Id column of the Genre table. As soon as you release the mouse, SSM S creates a new inner join 
in the SQL pane for you with the exact same code as you saw earlier. SQL Server understands the 
primary and foreign l<eys that have been set up in the database tables and correctly joins the pri- 
mary l<ey of the Genre table (id) to the foreign l<ey of the Reviews table (Cenreld). 

7. M odify the SQL statement so it selects only the id and the Title columns from the Review 
table and the Name column from the Genre table. You can do this by altering the SQL statement 
manually or by unchecking the columns in the Diagram pane. Your SQL statement should now 
look likethis: 


SELECT TOP (200) Review. Id, Review. Title , Genre. Name 
FROM Review INNER JOIN Genre ON Review. Genreld = Genre. Id 
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8. Finally, press Ctrl4fl to execute the query. Your Results pane should now look like Figure 12-15. 
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How It Works 

By using a join In your SQL statement, you tell the database how to relate rows to each other. In this 
example, you joined the cenreid column of the Review table to the actual id of the Genre table: 

SELECT 

Review. Id, Review. Title, Genre. Name 
FROM 
Review 

INNER JOIN Genre ON Review . Genreld = Genre. Id 

With this JOIN, you can retrieve data from multiple tables and present them In a single result set. SQL 
Server returns the correct genre name for each review, as Is shown In Figure 12-15. 


In addition to selecting data, you also need to beableto Insert data Into thedatabase. You do this 
with the INSERT statement. 

Creating Data 

To Insert new rows In a SQL Server table, you use the insert statement. It comes In a few different 
flavors, but In Its simplest form It looks like this: 

insert into TableName {Columnl [, Column2]) VALUES {Valuel [, Value2]) 

Just as with the WHERE clause, you need to enclose string and date values In single quotes, but you 
can enter numbers and boolean values directly In your SQL statement. The following snippet shows 
how to Insert a new row In the Genre table: 

INSERT INTO Genre {Name, SortOrder) VALUES ('Tribal House', 20) 

The Id column of the Genre table Is set up to generate a value automatically when you Insert a new 
row (you see more of this concept, called Identity columns, later In this chapter). Because It's gener- 
ated by SQ L Server, It's not part of this query. After you have created some data, you may want to 
edit It again. You do this with the update statement. 


438 I CHAPTER 12 INTRODUCTION TO DATABASES 


Updating Data 

To update data in a table, you use the update statement: 

UPDATE TableName SET Columnl = NewValuel [, Column2 = NewValue2] WHERE 
Column3 = Values 

With the UPDATE statement, you use column = value constructs to indicate the new value of the 
specified column. You can have as many of these constructs as you want, with a maximum of one 
per column in the table. To limit the number of items that get updated, you use the where clause, 
just as with selecting data as you saw earlier. W ithout a where clause, all rows will be affected 
which is usually not what you want. 

The following example updates the row that was inserted with the insert statement you saw ear- 
lier. It sets the Name to Trance and Updates the sortorder to 5 to move the item up a little in sorted 
lists. It also uses the unique ID of the new row (13 in this example) in the where clause to limit the 
number of rows that get affected with the update statement. 

UPDATE Genre SET Name = 'Trance', SortOrder = 5 WHERE Id = 13 

Obviously, you may also need to delete existing rows. It should come as no surprise that the SQL 
language uses the delete statement for this. 


Deleting Data 

J ust as with the select and update statements, you can use the where clause in a delete statement 
to limit the number of rows that get deleted. This where clause is often very important, because you 
will otherwise wipe out the entire table instead of just deleting a few rows. Beware! 

W hen you write a delete statement, you don't need to specify any column names. All you need to 
do is indicate the table that you want to delete rows from and an (optional) where clause to limit 
the number of rows that get deleted. The following example deletes the row that was inserted and 
updated in the previous two examples: 

delete from Genre WHERE Id = 13 

If you leave out the WHERE clause, all rows will be deleted from the table. 
You see these SQL statements at work in the next exercise. 


lUmmg^Q Working with Data in the Sample Database 

In this exercise, you put everything you learned so far into practice. In a series of steps, you see how to 
create a new row in the Genre table, select it again to find out its new ID, update it using the update 
statement, and finally, delete the genre from the database. Although the examples themselves may seem 
pretty trivial, they are at the core of how SQ L works. If you understand the examples from this section, 
you'll be able to work with the remaining SQL statements in this and coming chapters. 

1 . Still in SSM S, right-click the Genre table and choose Edit Top 200 Rows. If the table was already 
open with an old query, you need to close it first by pressing Ctrl-ff 4. This gets rid of the existing 
SQ L statement. 
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2. 
3. 


4. 


5. 


7. 
8. 


9. 


10. 


11. 


Click the first tliree buttons on tlie Query Designer tooibar (Diagram, Criteria, and SQL pane) to 
open up tlieir respective panes. 


In tlie SQL pane, remove TOP (200) from the SQL statement and then in 
the Diagram pane, uncheck the id column and leave Name and sortorder 
checked, as shown in Figure 12-16. 

Because the id column gets an auto-generated value from the database, you 
cannot supply an explicit valuefor it in an insert statement. 


■ Genre 


□ * (All Columnj) 

□ id 
0Name 
HSortOrdsr 


FIGURE 12-16 



FIGURE 12-17 


Qn the Query Designer toolbar click the Change Type button and choose 

the third option: Insert Values. The query in the SQL pane is updated and now contains a template 

for the INSERT statement: 

INSERT INTO Genre {Name, SortOrder) VALUES (,) 

Between the parentheses for the values, enter a name (between single quotes) and a sort order for 
your genre separated by a comma: 

INSERT INTO Genre (Name, SortOrder) VALUES ('Folk', 15) 

Press Ctrl-hR to execute the query. You should get a 
dialog box that tells you that your action caused one row 
to be affected, as shown in Figure 12-17. 

Click QK to dismiss the dialog box. 

Clear out the entire SQL statement from the SQL pane 
(you can useCtrl-f-A to select the entire SQL statement 
and then press the Delete key to delete it) and replace it 
with this code, which selects all the genres and sorts them 
in descending order: 

SELECT Id, Name FROM Genre ORDER BY Id DESC 

Press Ctrl-hR to execute this select statement. The Results pane shows a list of genres with the one 
you just inserted at the top of the list. N ote the ID of the newly inserted row. It should be 13 if you 
haven't inserted any row before, although it's okay if you have a different ID. 

Click the Change Type button on the toolbar again, this time choosing Update. Complete the SQL 
statement that SSM S created for you so it looks like this: 

update 

Genre 
SET 

Name = 'British Folk', 
SortOrder = 5 
WHERE 
Id = 13 

Don't forget to replace the number 13 in the SQL statement with the ID you determined in step 9. 

Press Ctrl-ffl again to execute the query and you'll get a dialog box informing you that one row has 
been modified. 
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12. Once again, clear the SQL pane and then enter and execute the following query by pressing Ctrl+R: 

SELECT Id, Name FROM Genre WHERE Id = 13 

Replace the id in the where clause with the ID of the row you determined in step 9. You should 
seethe updated row appear. 

13. On theOuery Designer toolbar, clicl< the Change Type button and choose Delete. SSM S changes 
the SOL statement so it is now set up to delete the row with an ID of 13: 

DELETE FROM Genre WHERE (Id = 13) 

14. Press Ctrl+R to execute the query and delete the row from the database. Clicl< OK to dismiss the 
confirmation dialog box. 

15. To confirm that the row is really deleted, clicl< the ChangeType button once more and choose 
Select. Then choose one or more columns of the Genre table in the Diagram pane and press Ctrl4fl 
again. You'll see that this time no rows are returned, confirming that the newly inserted genre has 
indeed been deleted from the database. 

How It Works 

In this short exercise, you carried out all four parts of theCRU D acronym, which gave you a look at 
the life cycle of data in a SOL Server database from creation to deletion. 

You started off with an insert statement: 

INSERT INTO Genre (Name, SortOrder) VALUES ('Folk', 15) 

This creates a new row in the Genre table. As you see in the next section, the id column of the Genre 
table is an identity column, which means that each new row gets a new, sequential ID assigned 
automatically. 

To retrieve that ID, you used a select statement with an order by clause that orders the rows on their 
IDs in descending order, so the most recent ID was put on top of the list. Retrieving the new ID lil<e 
this in a busy application is not reliable because you may end up with the ID of a row inserted by some- 
one else. You see later in the bool< how to retrieve the ID in a reliable way, but for the purposes of this 
exercise, the order by method worl<s well enough. 

A rmed w ith the new I D , you executed an update statement to change the Name and sortorder of the 
newly inserted genre. If you want to update only a single column with the update statement— say you 
want to change only the Name— you can simply leave out the other columns. For example, the following 
UPDATE statement changes only the Name, leaving all other columns at their original values; 

update 

Genre 
SET 

Name = 'British Folk' 
WHERE 
Id = 13 

Finally, at the end of the exercise, you executed a delete statement to get rid of the new row. It's 
always important to specify a where clause when executing a delete or an update statement to stop 
you from clearing the entire table or from assigning the same value to all rows. 

DELETE FROM Genre WHERE (Id = 13) 
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This SQL statement simply deietes tlie row witli an ID of 13. If the row exists, it gets deleted. If the 
row does not exist, no error is raised, but the dialog box in SSM S shows you that zero rows have been 
affected. The parentheses are not required in this example, but they help in determining precedence 
when you have multiple conditions in your where clause. 


Up to this point, you have seen how to worl< with existing tables in a database. H owever, it's also 
important to understand how to create new tables with relationships yourself. This is discussed in 
the next section. 

CREATING YOUR OWN TABLES 

Creating tables in a SQL Server database is easy using thedatabase tools that are part of SSM S. You 
see how you can create your own tables in the database after the next section, which briefly intro- 
duces you to the data types at your disposal in SQL Server. 

Data Types in SQL Server 

Just as with programming languages lil<e Visual Basic .N ET and C#, a SQL Server database uses 
different data types to store its data. SQ L Server 2012 supports more than 30 different data types, 
most of which look similar to the types used in .N ET. The following table lists the most common 
SQL Server data types together with a description and their .N ET counterparts. 


SQL 2012 DATA TYPE 

DESCRIPTION 

.NET DATA TYPE 

bit 

Stores boolean values in a 0 / 1 format (1 = True, 0 = 
False). 

System. Boolean 

char / nchar 

Contains fixed-length text. When you store text 
shorter than the defined length, the text is padded 
with spaces. The nchar stores the data in Unicode 
format, which enables you to store data for many 
foreign languages (at the cost of needing twice as 
much space in the database). 

System. String 

datetime 

Stores a date and a time in the range 1753/1/1 
through 9999/12/31. 

System. DateTime 

datetime2 

Similar to the datetime type, but with a greater pre- 
cision and range (from 0001/1/1 through 9999/12/31) 

System . DateTime 

date 

Stores a date without the time element. 

System . DateTime 

time 

Stores a time without the date element. 

System . TimeSpan 

decimal 

Enables you to store large, fractional numbers. 

System. Decimal 

float 

Enables you to store large, fractional numbers. 

System . Double 


continues 
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(continued) 


SQL 2012 DATA TYPE 

DESCRIPTION ^/^^^^^^^^^^l^^^/l^^^ 

.NET DATA TYPE 

binary / 
varbinary 

Enables you to store large binary objects such as 
files, binary has a fixed length whereas varbinary 
stores binary objects with a variable length. 

System. Byte [] 

tinyint 

Used to store integer numbers ranging from 0 to 
255. 

System. Byte 

smallint 

Used to store integer numbers ranging from -32,768 
to 32,767. 

System. Intl6 

int 

Used to store integer numbers ranging from 
-2,147,483,648 to 2,147,483,647. 

System. Int32 

bigint 

Used to store large integer numbers rang- 
ing from -9,223,372,036,854,775,808 to 
9,223,372,036,854,775,807. 

System. Int64 

text / ntext 

Used to store large amounts of text. The ntext 
stores the data in Unicode format, which enables 
you to store data for many foreign languages. 

System. String 

varchar / 
nvarchar 

Used to store text with a variable length, nvarchar 
stores the data in Unicode format. 

System. String 

uniqueidentif ier 

Stores globally unique identifiers. 

System. Guid 


For a complete list of all the supported data types in SQL Server 2012, check out the M SDN docu- 
mentation at http : //tinyurl . com/SqlDataTypes. 

Some of these data types enableyou to specify the maximum length. When you definea column of 
type char, nchar, varchar, or nvarchar you need to Specify the length in characters. For example, 
an nvarchar (10) enables you to store a maximum of 10 characters. For char and nchar, the value 
you put in a column is padded with spaces if the value you supply is shorter than the maximum 
length. The types varchar and nvarchar also enableyou to specify max as the maximum size. With 
the MAX specifier, you can store data up to 2 GB in a single column. For large pieces of text, I ike the 
body of a review, you should consider the nvarchar (max) data type. If you have a clear idea about 
the maximum length for a column (like a ZIP code or a phone number) or you want to explicitly 
limit the length of it, you should specify that length instead. For example, the title of a review could 
be stored in an nvarchar (200) column to allow up to 200 characters. 

Understanding Primary Keys and Identities 

To uniquely identify a row in a table, you can set up a primary key. A primary key consists of one 
or more columns in a table that contains a value that is unique across all rows. W hen you iden- 
tify a column as a primary key, the database engine ensures that no two rows can end up with the 
same value. A primary key can consist of just a singlecolumn (for example, a numeric column that 
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contains unique numbers for eacli row in tlietabiesucli as tlie id coiumn of tlie Genre tabieyou saw 
eariier) or it can span muitipie coiumns, wlieretlie coiumns togetlier form a unique ID for tine entire 
row. 

SQL Server aiso supports identity columns. An identity column is a numeric column whose sequen- 
tial values are generated automatically whenever a new row is inserted. They are often used as the 
primary l<ey for a table. You see how this worl<s in the next section when you create your own 
tables. 

It's not a requirement to give each table a primary l<ey, but it mal<es your life as a database program- 
mer a lot easier, so it's recommended to always add one to your tables. 

Creating tables, primary l<eys, and identity columns is really easy with SSM S's database tools, as 
you see in the next Try It Out. 


TRY IT OUT 


Creating Tables in the Table Designer 


In this exercise you add two tables to a new database that you use in the Planet Wrox website later. You 
can delete the test database you created at the beginning of this chapter because you don't need it 
anymore. 


1 . Still in SSM Sand logged in to theLocalDB SQL 
Server, right-clicl< the Databases node and choose 

N ew Database. In the dialog box that follows, type 
pianetwrox as the name, and then enter 

C:\BegASPNET\Site\App_Data aS the Path for bOth 

rows in the Database Files section of the dialog box 
(you may need to scroll to the right to see the Path 
column). This creates the new database in theApp_ 
Data folder of your website so you can easily con- 
nect to it later. Clicl< QK to create the database. 

2. In theQbject Explorer, expand Databases and then 
expand the database you just created. Right-clicl< 
the Tables node and choose N ew Table, as shown in 
Figure 12-18. 

3. In the dialog box that follows, you can 
enter column names and data types that 
together mal<e up the table definition. 
Create three columns for the id. Name, and 
SortOrder of the Genre table SO the dialog 
box ends up as shown in Figure 12-19. 

M al<e sure you clear the checl< box for 
all three items in the Allow N ulls col- 
umn. This column determines if fields are 
optional or required. In the case of the Genre 
table, all three columns will be required, 
so you need to clear the Allow N ulls check box 


Object Explorer 

Connect' ■ T [H ^ 


,, (LocalDB)\vl1.0 (SQL Server n.0,2100-VPC2012RTM\lmar) 

, i Databases 

+ System Databases 
- ,J PlanetWrox 

1+ Database Diagrams 


a stot 

ffi □ Seci 
) C3 Security 


S □ Replication 
E ^ Management 


1 

New Table... j. i 


New FileTable.lr^ 


Filter t 


Start PowerShell 


Reports ► 


Refresh 


FIGURE 12-18 
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Column Name 

Data Type 

Allow Nulls 

> 

Id 

int 

□ 


Name 

nvarchar(IOQ) 

□ 


SortOrder 

int 

□ 




□ 


FIGURE 12-19 
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4. N ext, select the entire row for the id by 
clicking in the margin on the left 
(identified by the blacl< arrow in Figure 
12-19) and then on the Table Designer 
toolbar, visible in Figure 12-20, clicl< the 
second button from the left (with the yel- 
low l<ey on it) to turn the id column into 
a primary l<ey. 


Generate Change 
Script 


Manage Manage 
Indexes Fulltext Manage Spatial 
and Keys Index Indexes 

11 I 


Set Primary Key 

Relationships 


^ # 1 il a S 

Manage Checl< Constraints 
Manage XML Indexes 


Below the table definition you see the figure 12-20 
Column Properties, a panel that lool<s 

similar to the Properties Grid in VS. With the id column still selected, scroll down a bit on the 
Column Properties grid until you see Identity Specification. Expand the item and then set (Is 
Identity) to Yes, as shown in Figure 12-21. 


Coiumn Properties] 



DTS-published 

Mo 


> Full-text Spectfication 

No 


Has Non-SQL Server Subscriber 

No 


d Identity Specification 



(Is Identity) 


1 

Identity Increment 

1 


Identity Seed 

1 


Indexable 

Yes 


Os Identity) 


FIGURE 12-21 


6. Press Ctrl-f-S to save your changes. A dialog box pops up that enables you to provide a name for the 
table. Type Genre as the name and clicl< 0 K to apply your changes. Then press Ctrl-ff 4 to close 
the table designer. 

7. Create another table by following steps 2 and 3, but this time create a table with the following 
specifications to hold the C D and concert reviews for the Planet W rox website. 


COLUMN NAME 

DATA TYPE 

ALLOW NULLS 

DESCRIPTION ^^^^^^^^^^^BB 

Id 

int 

No 

The primary key and identity of the 
table. 

Title 

nvarchar (200) 

No 

Contains the title of the review. 

Summary 

nvarchar (max) 

No 

Contains a short summary or teaser 
text for the review. 

Body 

nvarchar (max) 

Yes 

Contains the full body text of the 
review. 
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COLUMN NAME 

DATA TYPE 

ALLOW NULLS 

DESCRIPTION 

Genreld 

int 

No 

Contains the ID of a genre that the 
review belongs to. 

Authorized 

bit 

No 

Determines whether the review is 
authorized for publication by an 
administrator. Unauthorized reviews 
will not be visible on the website. 

CreateDateTime 

datetime 

No 

The date and time the review is 
created. 

UpdateDateTime 

datetime 

No 

The date and time the review is last 


updated. 


8. M ake the id column the primary key again, and set its (Is Identity) property to Yes just as you did 
in steps 4 and 5. 

9. Click the CreateDateTime column ohceand then on theColumn Properties grid, typegetdateo 
in the field for the Default Value or Binding property, assliown in Figure 12-22. This inserts the 
current date and time for new rows if you don't supply an explicit value. 


VPC2012RTM\LOCAL..,rox - dbo.Table.l* X 


1 Column Name 

Data Type 

Allow Nulls 


Id 

int 

□ 


Title 

nvarchar(20P) 

□ 


Summary 

nvarchar(MAX) 

□ 


Body 

nvarchar(MA>Q 

□ 


Genreld 

int 

□ 


Authorized 

bit 

□ 


^ j CreateDateTime 

datetime 

□ 


UpdateDateTime 

datetime 

□ 



Column Properties 




-J 

(Name) 

CreateDateTime 


Allow Nulls 

No 


Data Type 

datetime 


Default Value or Binding 

1 getdateO 


A Table Designer 

V 

Default Value or Binding 


FIGURE 12-22 


10. Repeat the preceding step for the UpdateDateTime column. 

11. When you're done, press Ctrl-f-S to save the table and call it Review. Close the table designer by 
pressing Ctrl-ff 4. 


446 I CHAPTER 12 INTRODUCTION TO DATABASES 


How It Works 

The Table Designer in SSM S is pretty straiglitforward. You simpiy type new coiumn names and define 
a data type for tlie coiumn, and you're pretty mucli done. Some coiumns, sucli as tlie id coiumn in tiie 
Genre and Review tabies, require a bit more wori<. For tliose coiumns, you set (Is Identity) to Yes. Tiiis 
means tiiat SQL Server automaticaiiy assigns a new sequential number to eacli new row tliat you insert. 
By default, tlie first row in the table gets an ID of 1, and the ID of subsequent rows is increased by one. 
You can change the default behavior by setting the Identity Increment and Identity Seed in the Identity 
Specification element for the column. 

You also assigned a default value to the CreateDateTime and UpdateDateTime columns of the Review 

table. Default values are inserted by the database when you don't supply one explicitly in your SQL 
statements. This means that if your insert statement does not contain a valuefor the CreateDateTime 
or UpdateDateTime column, the database w i 1 1 insert a default valuefor you automatically. In the pre- 
ceding Try ItQut, this default value was getdateo, which inserts today's date and time automatically. 
This way, you can easily track when a review was created. In later chapters you see how to update the 
UpdateDateTime column When reviews are Updated. 


In addition to relationships that are only defined in your own SQL queries as you saw before with 
the SELECT and join statements, you can also create relationships in the database. The benefits of 
relationships and how you can create them in your database are discussed in the next section. 

Creating Relationships between Tables 

Consider the tables you have created so far. You created a cenre table with an id column to 
uniquely identify a genre row. You also created a Review table with a cenreid column. Clearly, this 
column should contain an ID that points to a row in the Genre table so you know to which genre a 
review belongs. Now imagine that you delete a row from the Genre table that has reviews attached 
to it. Without a relationship, the database will let you do that. However, this is causing a great deal 
of trouble. If you now try to display the genre together with a review, it will fail because there is 
no longer a matching genre. Similarly, if you want to list all the reviews in your system grouped by 
genre, you'll miss the ones that belong to the deleted genre. 

To avoid these kinds of problems and keep your database in a healthy and consistent state, you can 
create a relationship between two tables. With a proper relationship set up, the database will stop 
you from accidentally deleting rows in one table that still have other rows attached to it. 

Besides the protection of data, relationships also make your data model clearer. If you look at the 
database through a diagram (which you use in the next exercise), you'll find that relationships 
between tables help you better understand how tables are connected, and what data they represent. 

You can define a relationship by creating one between the primary key of one table and a column 
in another table. The column in this second table is referred to as a foreign key. In the case of the 
Review and Genre tables, thecenreid column of the Review table points to the primary key col- 
umn Id of the Genre table, thus making cenreid a foreign key. In the next exercise, you see how to 
create a relationship between two tables and then execute a SQ L statement that shows how the rela- 
tionship is helping you to protect your data. 
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TRY IT OUT 


Creating a Relationship between Two Tables 


Before you can visually add a relationship between two tables, you need to add a diagram to your data- 
base. A diagram is a visual tool that helps you understand and define your database. 0 n the diagram, 
you can drag a column from one table to another to create the relationship. In this exercise, you create 
a relationship between the Review and Genre tables. 

1 . On the Object Explorer, expand your Planet Wrox database, right-click the Database Diagrams 
element (visible in Figure 12-18), and click N ew Database Diagram. If this is the first time you are 
adding a diagram to the database, you may get a dialog box asking if you want SSM Sto make you 
the owner of the database. Click Yes to proceed. Don't worry if you don't get this prompt; things 
will work fine without it. The prompt may be followed by another that indicates that, in order to 
work with diagrams, SSM S needs to createa few required objects. Again, click Yes to proceed. 

2. In the Add Table dialog box that follows, select both tables you created in the previous Try It Out 
(hold down the Ctrl key while you click each item), click Add to add the tables to the diagram, and 
then click Close to dismiss the Add Tabledialog box. 

3. If necessary, arrange the tables in the diagram using drag and drop so they are positioned next to 
each other. 

4. On the Genre table, click the left margin of the id column (it should contain the yellow key to 
indicate this is the primary key of the table) and then drag it onto theGenreid column of the 
Review table and release your mouse. 

5. Two dialog boxes pop up that enable you to customize the defaults for the relation. I n the top- 
most window, confirm that id is selected from Genre as the Primary Key Table and that Genreid 
isselected from Review astheForeign Key Table. Click OK to dismiss the top window. In thedia- 
log box that remains, visible in Figure 12-23, notice how Enforce Foreign Key Constraint is set to 
Yes. This property ensures that you cannot delete a row from the Genre table if it still has reviews 
attached to it. Click OK to dismiss this dialog box as well. 


Selected Relationship: 


Foreign Key Relationship 


Editing properties for new relationship. The Tables And Columns 
Specification' properly needs to be filled in before the new relationship will be 
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FIGURE 12-23 
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6. The diagram window sliould now sliow a line between tlietwo tables. At the side of the Genre 
table, you should see a yellow l<ey to indicate this table contains the primary l<ey for the relation- 
ship. At the other end, you should seethe infinity symbol (the number 8 turned 90 degrees) to indi- 
cate that the Review table can have many rows that use the same cenreid. You seethe diagram in 
Figure 12-24. 
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FIGURE 12-24 


N ote that in your diagram the line heads 
between the two tables don't necessarily 
point to the correct columns; they just point 
to the entire table. This can be confusing 
sometimes because you may thinl< that other 
columns are actually related. To confirm 
the columns participating in the relation- 
ship, right-clicl< the line between the two 
tables and choose Properties. T he Table and 
Columns Specification item shows which col- 
umns and tables participate in the relation- 
ship, shown in Figure 12-25. 

You can drag the line heads up and down 
to point to the correct column. This doesn't 
affect the tables, but it mal<esyour intent 
clearer to others viewing the diagram. 

7. Press Ctrl -f-S to save the changes to the dia- 
gram. You can leave the name set to its default or you can enter a more descriptive name such as 
Reviews and Genres and click OK. You'll get another warning that states that you are about to 
mal<e changes to the Review and Genre tables. Clicl< Yes to apply the changes. 

8. Go bacl< to the Object Explorer, expand the Tables node, right-clicl< the Genre table, and choose 
Edit Top 200 Rows. Enter a few different genres by typing a Name and a sortorder. When you 
press Tab in the sortorder field to tab away from the current row, the row is inserted in the data- 
base, and the id column isfilled with a unique, sequential number. You should end up with a list 
similar to the one shown in Figure 12-26. 
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9. 0 pen the Review table from the Database Explorer using 
the Edit Top 200 Rows command and enter a few review 
rows. For thecenreid, supply some of the new IDs you 
got when you inserted rows in the Genre table. You can 
just make up the Title, Summary, and Body fields for now 
and set Authorized to True. Remember, you don't have to 
enter a value for the date columns. If you leave them out, 
the database will insert the default value for you. Notice 
that you can't insert a value in the id column yourself. 
Because this column isan Identity field, the database sup- 
plies values for you automatically. If you get an error 
about missing values for the date columns, ensure that 
you entered a proper default value in the previous exer- 
cise. When you're done entering a row, clicl< outside the 
row (on the new, empty row below it, for example) to 
insert the row in the table. Your list of rows should lool< 
similar to Figure 12-27, although your content for the col- 
umns, of course, may be different. 




Id 

Title 

Summary 

Body Genreld 
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Body for item 24 5 

True 



25 

Norah Jones - Not Too Late 

Summary for item 25 
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10. Right-clicl< the Genre table again and 
choose Edit Top 200 Rows. Clicl< the 
SQL pane button on the Query Designer 
toolbar and then use the Change Type 
button on the same toolbar to create a 
DELETE query. M odify the query so it 
deletes one of the genre IDs you used in 
step 9 to link the reviews to, like this: 

DELETE FROM Genre WHERE Id = 5 

Thiscodewill attempt to delete the 
Indie Rock genre. However, because 
reviews are connected to it, the delete 


Microsoft SQL Server Management Studid 


SQL Execution Error. 


Executed SQL statement: DELETE FRQM Genre WHERE (Id = 5) 
Error Source; .Net SqICIient Data Provider 

Error Message; The DELETE statement conflicted with the REFERENCE 
constraint "FK_Review_Genre". The conflict occurred in database 
"PlanetWrox", table "dbo. Review", column 'Genreld', 
The statement has been terminated. 


Help 


FIGURE 12-28 


action should fail. Press Ctrl -hR to execute the query. Instead of deleting the row from the Genre 
table, SSM S now shows you the dialog box you see in Figure 12-28. 
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How It Works 

W hen you create a relationship between two tabies, the database wiii enforce this relationship when 
you try to insert, update, or delete data. In this example, rows in the Review table have a genre 
that exists in the Genre table. W hen you try to delete a row from the Genre table, the database sees 
that the genre is used by a row in the Review table and cancels the delete operation. In Chapter 15 
you learn how to handlethis situation in your website and present your user with a friendly error 
message. 


N ow that you've seen the underlying concepts in dealing with databases, you're ready for the next 
chapter, which shows you how to worl< with your database using the many available ASP.N ET data 
controls. 


PRACTICAL DATABASE TIPS 

The following list provides some practical tips on working with databases: 

>■ Because the database is often at the heart of a website, you need to carefully consider its 
design. It's especially important to thinl< of a good design up front, before you start building 
your site on top of it. W hen you have a number of pages that access your database, it will 
become harder to mal<e changes— such as removing tables or renaming columns— to the data 
model. 

>- Always consider the primary l<ey for your table. I prefer to give each table a column 
called Id. The underlying data type is then an int and an identity, which gives each row 
a unique ID automatically. Instead of an int, you can also consider theuniqueidenti- 
f ier data type, which ensures uniqueness even across database or application boundaries. 
H owever, a uniqueidentif ier is much slower than the int data type (especially 
during inserts) so use this only when you need the benefits of the uniqueidentif ier 
data type. 

> Give your database objects such as tables and columns logical names. Avoid characters 
such as spaces, underscores, and dashes. A name lil<eGenreid is much easier to read than 

colGen_ID_3. 

>• Don't use select * to get all columns from a database. By using select * you may be 
selecting more columns than you actually need. By defining the columns you want to retrieve 
explicitly, you make your intentions to others clearer and increase the performance of your 
queries at the same time. 

>■ Always create relationships between tables when appropriate. Although querying for the 
reviews and genres you saw in this chapter without a relationship between the two tables 
works just fine, relationships help you enforce the quality of your data. With proper 
relationships, you minimize the chance of ending up with orphaned or incorrect data. 
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SUMMARY 

The ability to worl< witli databases is a good addition to your set of web development sl<ills. M ost of 
today's dynamic websites use databases, so it's important to understand how to work with them. 

To access and manipulate data in a relational database, you use a language called Structured Query 
Language, or SQL for short. Among other elements, this language defines four important keywords 
that enable you to perform CRUD — Create, Read, Update, Delete— operations against a database. 

The SELECT statement enables you to retrieve data from one or more tables. To access more than one 
table, you can useoneof the available join types to definea relationship between the tables. To limit 
the number of rows returned by a query, you can use a where clause. To order the items in the result set 
returned by your query, you use the order by clause. To create new rows in your database you use the 
INSERT statement, and you need an update statement to change existing rows. Finally, to delete rows 
that you no longer need, you use the delete statement. Just I ike the select and update statements, 
DELETE takes an optional where clause that enables you to limit the number of rowsthat get deleted. 

The second part of this chapter showed you how to use the built-in database tools to create tables 
with relationships between them. In addition, you saw how a relationship between two tables 
enables you to protect your data from becoming corrupt or orphaned. 

Although this chapter had a strong focus on the SQL that you need to write to access a database, 
you see in the next chapter that in many cases Visual Studio makes accessing databases pretty easy 
as well by generating most of the code for you. H owever, a solid knowledge of SQL helps you in 
understanding and tweaking the code that is being written for you. 


EXERCISES 


1. If you try to delete a row from the Genre table that has matching rows In the Review table, the 
DELETE statement falls. How is this possible? 

2. If you try to delete a row from the Review table that has Its Genreid set to the id of an existing 
genre in the Genre table, the delete statement succeeds. Why? 

3. Imagine you want to clean up your database and decide to delete all rows from the Review table 
that have an id of 100 or less. Write a SQL statement that deletes these rows. 

4. Imagine you want to delete the genre with an ID of 4. But before you delete the genre, you want 
to reassign reviews assigned to this genre to another genre with an ID of 11. What SQL statements 
do you need to accomplish this? 

5. Write a SQL statement that updates the Rock genre to read Punk Rock instead. You have at least 
two ways to write the where clause for this statement. 

You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 


CRUD 
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Update, and Delete 
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JOIN 

Enables you to express the relationship between two or more tables in a query 
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Primary key 

Consists of one or more columns In a table that uniquely identify a row in that 


table 

Relational 

A type of database where data is stored in separate, spreadsheet-like tables 

database 

that can refer to each other 

Relationship 

Defines the relation between one or more tables and helps you enforce refer- 


ential integrity 

Table 

An object in a database that enables you to store data 


Displaying and Updating Data 


WHAT YOU WILL LEARN IN THIS CHAPTER: 

>• How to display, insert, edit, and delete data using controls such as 

GridView, DetailsView, and SqlDataSource 

>• How to create a rich interface that enables a user to insert and edit 
data while maintaining data integrity with the ASP.NET validation 
controls 

>" The best way to store your connection strings in your application so 
they are easily updatable 


WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 
www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the Chapter 13 dowhload. 

In this chapter you learn how to display, insert, update, and deletedata using the popular data 
controls that ship with ASP.N ET. Besides working with the visual controls that are used to 
display and edit data in a web page, you also learn how to work with the sqiDatasource con- 
trol that acts as the bridge between the database and your ASPX pages. 

The first things you need to look at are the available data controls, discussed in the next 
section. 


DATA CONTROLS 


To enableyou to work efficiently with thedata in your system, ASP.N ET offers two sets of 
data-aware controls: the data-bound controls and the data source controls. 
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The first group contains controis tliat you use to dispiay and edit data, 
sucii as tiie GridView, Repeater, and Listview controis in tile user inter- 
face. Tiie data source controis are used to retrieve data from a data source, 
iii<ea database or an X M L fiie, and tiien offer tiiis data to tiie data-bound 
controis. Figure 13-1 siiows tiie compiete iist of avaiiabie data controis in 
tiie Data category of tiieTooibox. 

Tiiefoiiowingtiiree sections provide a quici< overview of aii tiie controis 
in tiie Data category. In tiie remainder of tiiis ciiapter you get a mucii more 
detaiied iooi< at some of tiiese controis and iiow to use tiiem. 

Data-Bound Controls 

Seven of tiie controis in tiie Tooi box depicted in Figure 13-1 aretfie so- 
caiied data-bound controis. You use tiiem to dispiay and edit data on your 
web pages. Tiie cridview, DataList, Listview, and Repeater are aii abie 
to dispiay muitipie rows at the same time. As sucfi tiiey are often referred to 
as iist controis. Tiieoe tailsView and the pormview are designed to siiow a 
singie row at a time. TiieDataPager is a fieiper controi used to provide pag- 
ing capabiiitiesto tiie Listview controis. 

List Controls 

Because A SP.N ET offers muitipie controis to dispiay iists of rows, you may be wondering wiien to 
cfioose wiiat controi. Tiiecridview is a very versatiie controi tiiat supports automatic paging (wiiere 
rows are spread out over muitipie "pages"), sorting, editing, deieting, and seiecting. It renders its 
data iii<ea spreadsfieet witii rowsand coiumns. Aitiiougii many possibiiities exist to styietiieiooi<s 
of tiiese rows and controis (you iearn more about tiiis in Cfiapter 15), you cannot radicaiiy ciiange 
tiie way tiie data is presented. Additionaiiy, tiie cridview does not aiiow you to insert rows in tiie 
underiying data source direct iy. 

Figure 13-2 siiows a typicai cridview. 

Id Title CreateDateTime 

Edit Delete Select 44 Wait For Me byMoby 6/30/2009 11:19;24PM 

Edit Delete Select 43 21st Century Breakdown by Green Day 6/23/2009 10:38:58 PM 
Edit Delete Select 42 Farm by Dinosaur Jr 6/23/2009 10:36:01 PM 

Edit Delete Select 41 First Album by Miss KitSn & The Hacker 6/1 6/2009 8:50:38 PM 
1234 56 


FIGURE 13-2 

Tiie DataList controi enabiesyou to present data not oniy in rows as witii thecridview, but in coi- 
umns as weii, enabiing you to create a matrix-iii<e presentation of data. Tiie controi can be consid- 
ered deprecated and is repiaced witii tiie Listview, wiiicii is a iot more powerfui. As sucii, tiiis booi< 
doesn't discuss tiie DataList any furtiier. 

Tiie Repeater givesyou tiie greatest fiexibiiity in terms of tiie H TM L tiiat you output to tiie 
browser because tiie controi by itseif does not add any H TM L to tiie page output. As sucii, it's often 
used for hi TM L ordered or unordered iists (<oi> and <ui>) and otiier iists wiiere you can't afford 
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to have unwanted HTML mixed with your own. You define the entire client mari<up through the 
numerous templates the controi exposes. However, thisflexibiiity comes at a price: the control has 
no built-in capabilities to page, sort, or modify data. You see more of the Repeater control in the 
next chapter. 

TheListview was 1 ntroduced in ASP.N ET 3.5 and is a best-of-all-worlds combination of the 
Gridview, theDataList, and the Repeater. It has Undergone some changes in ASP.N ET 4 and 4.5 
that mal<e it even easier to worl< with. The control supports editing, deleting, and paging of data, 
similar to the Gridview. It supports multi-column and multi-row layouts lil<etheDataList offers, 
and it enables you to completely control the marl<up generated by the control, just as the Repeater 
does. It also supports inserting and updating data lil<ethe oetaiisview or Formview controls. In 
the next chapter, you see a lot more of the Listview control. 

In ASP.N ET 4, list controls were extended with a client iDRowSuf fix property that enables you to 
indicate the column whose value is used to create unique client-side IDs based on data in the data- 
base. For this to work, you need to set the ciientioMode property that you saw in earlier chapters 

to Predictable. 

In ASP.N ET 4.5, the controls have been extended again with a new property: itemType. You see 
this property at worl< in the next chapter. 

Single Item Controls 

T he Detaiisview and Formview controls are 
somewhat similar in that both of them can dis- 
play a single record at a time. The Detaiisview 
uses a built-in tabular format to display the data, 
whereas the Formview uses templates to let you 
define the look and feel of your data. A simple, 
template-based Detaiisview could look likethe figurei3-3 
one shown in Figurel3-3. 

The Formview control and a few of the Login controls you'll see in Chapter 16 have a 
RenderouterTabie property. W hen you Set this property to False (it defaults to True so you need 
to set it explicitly) the control doesn't generatea wrapping HTML <tabie> element. This in turn 
results in less code and cleaner HTM L. Both controls enable you to define the templates for different 
situations, such as a read-only display of data, and inserting and updating of data. You see how to 
customize these templates in the second half of this chapter. 

Paging Controls 

Another useful control IstheDataPager, which enables paging on other controls. For the time 
being, you can only use it to extend the Listview control, but that might change with future ver- 
sions of the .N ET Framework. The Listview and oataPager controls are discussed in Chapter 14. 

For the data-bound controls to display something useful, you need to assign them a data source. 
To bind thisdata source to the controls, two main methodsare available: You can assign data to 
the control's Datasource property, or you can use one of the separate data source controls. In later 
chapters, you see how to use the oatasource property; the different data source controls are the 
topic of thefollowing section. 


Title 

Oscar & the Wolf - Summer Skin 

Summary 

This revieu talks about their neu 
albuin "Simimer Skin" released in 2012. 

CreateDateTime 

2012/9/3 
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Data Source Controls 

The Data category of theToolbox contains six different data source controls tliat you can use to 
bind data to your data-bound controls. T lie xmiDatasource and siteMapDatasource controls are 
used to bind hierarchical, XM L-based data to these controls. You saw siteMapoatasource at worl< 
when you created the site map in Chapter 7. 

The objectDatasource control enables you to connect your data-bound controlsto separate objects 
in your application. Instead of tying your data-aware controls directly to a database, you bind data 
from a separate layer with custom objects to them. Get yourself a copy of Wrox's Professional 
ASP.N ET 4.5 (ISBN 978-1-118-31182-0) if you want to find out more about the objectoatasource 
control. 

The final three data source controls are the sqiDatasource, theEntityDatasource, and the 
LinqDatasource controls. Thefirsttwo arediscussed in thischapter and Chapter 14, respectively. 
TheLinqDatasource serves as a data source for LIN Q to SQL, a technology similar to the A DO. 
N ET Entity Frameworl< you learn more about in Chapter 14. Because M icrosoft is now promoting the 
Entity Frameworl< instead of LIN Q to SQL, I won't discuss the LinqDatasource control in this bool<. 

T he QueryExtender COntrol aCtS lil<ean add-on to the LinqDatasource and EntityDataSource 

controls in that it enables you to create a rich filtering interface to search for specific data with- 
out manually writing a lot of code. You can learn more about the QueryExtender in this article: 

http : //bit . ly/92kMPQ. 

Other Data Controls 

The final control in theToolbox is the chart control. It was initially released as an add-on to Visual 
Studio 2008 but has now been fully integrated into VS 2012. It's designed to render chart graphics 
ranging from simple bar charts to 3-D pie charts and fancy line diagrams. I won't discuss this con- 
trol any further, but you can find a series of articles that discuss it in detail here: http: //tinyuri 

. com/nsnbvv. 

In the next section you see how to usethe sqiDatasource and thecridview to retrieve and display 
data from a database. Later sections and chapters dig deeper into the other data controls. 


DATA SOURCE AND DATA-BOUND CONTROLS 
WORKING TOGETHER 

The SqiDatasource control enables you to quicl<ly create functional, database-driven web pages. 
Without writing a whole lot of code, you can create web pages that enable you to perform all four 
operations of the CRUD acronym: Create, Read, Update, and Delete data. Although its name may 
seem to imply that the control can access only M icrosoft'sSQL Server, that's not the case. The con- 
trol can access other databases, such as Q racle or M ySQ L , as well. 

Displaying and Editing Data with GridView 

To give you an idea of how the sqiDatasource control works in conjunction with thedata-bound 
controls, the next Try It Q ut shows you how to create a very simple data-driven web page that 
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enables you to update and delete the musical genres that are stored In the Genre table In the data- 
base. This chapter assumes you have the pianetwrox.mdf database with the Genre and Review 
tables In your App_Data folder. It's also assumed that these tables each contain at least a few rows. 
If you didn't follow thestepsin the preceding chapter, use the script file create pianet wrox 
Database, sqi Supplied In the Resources folder of that Chapter to create the necessary tables and 
records. You still need to create the database at c:\BegASPNET\site\App_Data as explained In the 
preceding chapter. It's also a good Idea to use this script If your own copy doesn't contain a lot of 
review and genre rows. This gives you a good set of sample rows to work with. 

^^^^^^Q Using the GridView and SqIDataSource Controls 

In this exercise you start building the M anagement section of the website that will be your main entry 
point to manage things such as reviews and genres In your site. For now, the pages you create In this 
section are accessible to all users of your site, but Chapter 16 shows you how to block access to this 
folder to any user that Is not an administrator. 

You see how to drag a table from the Database Explorer (the Server Explorer In the commercial ver- 
sions of Visual Studio) onto thepageand have VS createa web user Interface to manage Items In the 
database for you by automatically generating the necessary code for a cridview and a sqiDatasource. 
In later exercises In this book you see how to reproduce this behavior manually, giving you more con- 
trol over the code. 

1. Open the Planet Wrox website from Its location at C:\BegASPNET\site In VS. 

2. Right-click theMasterPages folder, choose Add o Add N ew Item, and add a new M aster Page 
called Management .master to the sIte. M ake sure It uses your programming language and that It's 
not based on an existing master page. Also, make sure It's using Code Behind by checking the Place 
Code In Separate File option. 

3. Change the HTM L Inside the <form> element to the following code that creates two elements (a 
<nav> and a < section>) floating next to each other. The first contains a simple list-based menu 
for the M anagement section, whereas the second contains the contentpiaceHoider control that 
enables content pages to provide custom content: 

<form id="forml" runat=" server "> 
<div> 

<nav style="width: 200px; float: left;"> 
<ul> 

<li><a href="-/Management/Default.aspx" runat=" server" > 

Management Home</a></li> 
<li><a href =" -/Management/Genres. aspx" runat=" server" >Manage Genres</a></li> 
</ul> 
</nav> 

<section style="width: 750px; float: left;"> 
<asp : ContentpiaceHoider ID= " cpMainContent " 

runat= "server" ></asp : ContentpiaceHoider > 

</section> 
</div> 

</ f orm> 

In the next steps, you add the two files linked to from the<nav> element. Save and close the mas- 
ter page. 
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4. Add a new folder to the root of the site and call it Management. Right-clicl< this new folder, choose 
Add oAdd New Item, and create a new standard Web Form called De fault . aspx. Don't use your 
custom template, and mal<e sure the page is based on the new Management. master file you just 
created by checl<ing Select M aster Page and then selecting that master page from thenasterpages 
folder. Add some text to the cpMaincontent content blocl< that welcomes the user to the 

M anagement section of the website: 

<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" runat=" Server "> 
<hl>Planet Wrox Management Section</hl> 

<p>Welcome to the Management section of this web site. Please choose an item 
from the menu on the left to continue. </p> 

< /asp : Content > 

Give the page a title of Planet Wrox - Management - Home. 

5. Create another page in the Management folder and call it Genres. aspx. Base it on the same master 
page and then change its title to Planet wrox - Management - Genres and switch it into Design 
View. 

6. Double-clicl< the pianetwrox.mdf file in the App_Data folder. This opens the Database Explorer 
(or the Server Explorer). If you don't see the Planet W rox database listed here or you get an error, 
refer to the preceding chapter, which explains how to set up the database. Remember, there's a 
script file in the Resources folder for the preceding chapter that creates the tables you'll work with 
in case you don't have your own. 

7. Expand the pianetwrox.mdf database, then the Tables node, and then drag the Genre table from 
the Database Explorer and drop it in the cpMaincontent area of the Genres page in Design View. 
VS creates a cridview and a sqiDatasource for you automatically. 

8. On the Smart Tasl<s panel for the Gridview control that should open automatically (if it doesn't, 
clicl< the gray arrow on the upper-right corner of the control or right-clicl< the control and choose 
Show Smart Tag), checl< all the available checl< boxes, shown in Figure 13-4. 

9. Right-clicl< the Management folder in the Solution Explorer and choose Add o Add N ew Item. 
Choose Web Configuration File and then clicl< Add to add a web.config file that applies to the 
Management folder Only. In thefilethat opens, add a <pages> element under <system.web> and set 
the theme attribute to an empty string, effectively disabling the theme for the entire M anagement 
section of the site: 

<conf iguration> 
<system.web> 

<pages theme="" /> 

</ system. web> 
</conf iguration> 

10. Save all your changes and then request Genres .aspx from the Management folder in your browser. 
You should see a grid with the genres from the Genre table (see Figure 13-5). The linl<s in the left 
column enable you to edit, delete, and select the relevant genres. Note that you can't delete genres 
that have one or more reviews attached to them. If you try, you'll get an error instead. Chapter 15 
digs much deeper into changing the user interface (Ul) to disable the Delete linl<s so users can no 
longer accidentally clicl< them. 
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FIGURE 13-5 


If the list with genres ends up below the menu on the left, you may need to make your browser 
window a little wider. 

11. Y ou can clicl< the column headers, such as Name and sortorder (visible in Figure 13-5), to sort 
the data in the grid on that column. If you clicl< the same header again, the data is sorted in reverse 
order. Y ou can move to another page in the grid by clicl<ing the numbers at the bottom. 

12. Clicl< the Edit linl< for one of the genres, change the name in the text box that has appeared, and 
clicl< the Update linl<. The cridview should now display the new name. 
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How It Works 

You didn't manually write any code to interact with the database in this exercise, but you got a lot of 
functionality simply by dragging and dropping a database table. To see how it worl<s, take a look at the 
source that VS generated. First, look at the markup for the sqiDatasource control: 

<asp : SqlDataSource ID="SqlDataSourcel" runat=" server" 

Connect ionString= " <%$ Connect ionSt rings : Plane tWroxConnectionStringl %>" 
ProviderName= " 

<%$ ConnectionStrings : PlanetWroxConnectionStringl . ProviderName %>" 
DeleteCommand= "DELETE FROM [Genre] WHERE [Id] = @Id" 

InsertCommand=" INSERT INTO [Genre] ([Name], [SortOrder] ) VALUES (SName, 
©SortOrder) " 

SelectCommand=" SELECT [Id] , [Name] , [SortOrder] FROM [Genre] " 

UpdateCommand= "UPDATE [Genre] SET [Name] = aName, [SortOrder] = aSortOrder 
WHERE [Id] = @Id"> 
<DeleteParameters> 

<asp : Parameter Name="Id" Type="Int32" /> 
</DeleteParameters> 
< Insert Parameters> 

<asp : Parameter Name="Name" Type="String" /> 

<asp : Parameter Name="SortOrder" Type="Int32" /> 
</ Insert Parameters> 
<UpdateParameters> 

<asp : Parameter Name="Name" Type="String" /> 

<asp : Parameter Name="SortOrder" Type="Int32" /> 

<asp : Parameter Name="Id" Type="Int32" /> 
</UpdateParameters> 
</asp : SqlDataSource> 

I changed the order of the attributes so all the commands are placed together. In your case, you may 
have the ProviderName attribute in a different location. As with all ASP.N ET controls, the order of 
attributes in the control declaration doesn't matter. 

A couple of interesting things are worth examining. First, note that the connectionstring and 
ProviderName attributes point to a Connection string that has been defined in theweb.conf ig file. 
You see more of this in the next section, including an explanation of the <%$ %> syntax used for the 
attributes. 

You then see four commands, each one of them containing a SQL statement that is used for one of 
the four operations of the CRU D acronym. The insert, update, and delete commands contain 
parameters, identified by the at symbol (@) prefix. At run time, when the control is asked to perform 
the relevant data operation, these parameters are substituted by runtime values. The sqiDatasource 
control keeps track of the relevant parameters in the *parameters collections. For example, the 
<DeieteParameters> element Contains a single parameter for the id (the primary key) of the genre: 

<DeleteParameters> 

<asp : Parameter Name="Id" Type="Int32" /> 
</DeleteParameters> 

N ote that the Name of the parameter minus the at symbol (@) lines up with the parameter in the SQL 
statement: 

DeleteCommand= "DELETE FROM [Genre] WHERE [Id] = (Sid" 
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N otice how VS has wrapped column and table names in square brackets ([] ). You normally only need 
these if your column or table name contains a special character such as a space or the name matches 
a reserved word. VS is just cautious and adds them to all columns and tables. You can leave them in, 
but if you write your own SQL statements you don't have to include them (although you could if you 
wanted to). 

All by itself, the sqiDatasource control can't do much at this stage. It needs a data-bound control 
that tells it what data operations to execute. In this Try It Out exercise the data-bound control is the 
Gridview that is defined with this code: 

<asp:GridView ID="GridViewl" runat=" server" AllowPaging="True" AllowSorting="True" 
AutoGenerateColumns= " False " DataKeyNames= "Id" DataSourceID= " SqlDataSourcel " 
EmptyDataText="There are no data records to display. "> 
< Columns > 

<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" 

ShowSelectButton="True" /> 
<asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" 

SortExpression="Id" /> 
<asp : BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /> 
<asp : BoundField DataField= " SortOrder " HeaderText = " SortOrder " 
SortExpression="SortOrder" /> 
</ Columns > 
</asp:GridView> 

The Gridview Contains a few important attributes. First, theDataKeyNames attribute tells the 
Gridview What the primary l<ey is of the row in the database. It needs this to uniquely identify rows in 
the grid. 

TheDatasourceiD attribute points to the sqiDatasource control that you saw earlier, whereas 
AiiowPaging and Aiiowsorting enable their associated features on the Gridview. 

Under the <coiumns> element you see a number of fields set up. First, you see a commandFieid. 
A CommandFieid is a column in the Gridview that enables a user to execute one or more actions for the 
row to which the commandFieid applies. It ends up in the browser as one or more text linl<s or buttons. 
In this example, showDeieteButton, showEditButton, and showseiectButton have all been set to 
True. This gives thegrid the functionality you seein Figure 13-5. When you clicl< one of the linl<s that 
have been created by the commandFieid, they'll trigger a command at the server. For example, clicl<ing 
the Edit linl< puts the Gridview in edit mode so you can edit the selected row. N otice how clicl<ing the 
Select linl< doesn't seem to change the Gridview at all. In Chapter 15 you see how to create styles for 
the Gridview SO you Can radically change the appearance of the control, including visually distinguish- 
ing a selected row from the others. 

If you want the Gridview to render buttons instead of linl<s, you need to set ButtonType to Button: 

<asp: CommandFieid ShowDeleteButton="True" ShowEditButton="True" 

ShowSelectButton="True" But tonType= "Button" ></asp : CommandField> 

The other three fields are so-called bound fields and map directly to the columns of the Genre table in 
the database with their DataFieid attribute so the Gridview l<nows what data to display where. 

The Gridview and SqiDatasource controls worl< together closely to retrieve and modify the data in 
the underlying data source. To give you an idea of how this worl<s, here'sa rundown of the events that 
took place when you requested the Genres page in the browser and then edited a single genre: 
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1. You request the page in your browser and the page begins its page iife cycle. 

2. Thecridview l<nows it is set up to retrieve and display data because it has a DatasourceiD attri- 
bute that points to a sqiDatasource control. It contacts this data source control and asks it for its 
data. The sqiDatasource in turn connects to the database and then fires its seiectcommand, the 
SQ L statement that selects the id, Name, and sortorder from the Genre table in the database: 

SelectCommand=" SELECT [Id] , [Name] , [SortOrder] FROM [Genre] " 

3. W hen the sqioatasource receives the requested rows from the database it hands them over to the 
Gridview, which Creates an HTM L table out of them using the bound fields that have been set up 
in the <coiurans> element. Thecridview keeps track of the unique ID for each row that is dis- 
played in the page by storing it in View State. 

4. As soon as you click the Edit link, the page posts back. Thecridview is able to see what row 
you clicked by looking at the associated oataKeyNames and retrieving the row's ID from View 
State. It then gets the latest results from the database by asking the sqioatasource again to fire 
its Seiectcommand, and, finally, puts the Selected row in edit mode so you can change the relevant 
details. When you click the Update link, thecridview collects the new values from theTextBox 
controls and then contacts the sqiDatasource again. 

5. For each of the parameters in the <updateparameters> element of the sqiDatasource, the 
Gridview Supplies a value. It retrieves the id of the genre from the selected row, and then retrieves 
the new Name and sortorder values from the Texteox controls in the page. 

6. Armed with the relevant data for the id. Name, and sortorder, the sqioatasource then executes 
its updatecommand against the database: 

UpdateCommand= "UPDATE [Genre] SET [Name] = ©Name, 

[Sortorder] = ©SortOrder WHERE [Id] = ©Id" 

Each of the parameters prefixed with the at symbol (@) isfilled with the values that thecridview 
supplied. The SQL statement that gets sent to the database ends up looking similar to this: 

UPDATE [Genre] SET [Name] = 'New Name', [SortOrder] = 1 WHERE [Id] = 1 

7. Finally, the cridview refreshes the data on the page by once again asking the sqiDatasource to 
execute its seiectcommand. This Way, the Gridview now displays the latest data with the update 
you made. 

The other commands work in a similar way and send their own SQL commands to the database. 

At the end of the exercise, you added a new web.configfileto the Management folder to reset the 
theme that is applied to all pages in the M anagement section. With the theme removed, it's easier to 
focus on the functionality of the M anagement section, rather than bedistracted by layout issues. In 
Chapter 15 you create a third theme specifically for the Management folder and apply that theme in the 
web.config file in the Management folder. That Way, your management pages will have a look and feel 
that's different from the pages in the front end. 


Now that you've seen how to display, edit, and delete data, it's time to learn how to insert new rows 
in the database using theDetaiisview control. 
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Inserting Data with DetailsView 

Just as displaying, updating, and deleting data with the cridview are pretty easy, so is inserting 
data with theoetaiisview control. Theoetaiisview supports a number of templates that enable 
you to customize the look and feel of the control in different modes. For example, the control has 

a <HeaderTemplate>, a <FooterTemplate>, and a <PagerTemplate> element that enable yOU tO 

define the look of the top and bottom parts of the control. In addition, the control hasa <Fieids> 
element that enables you to define the rows that should appear in the control, much like the 

<Columns> element of the CridVlew. 

The DetailsView is ableto display data in a few different modes. First of all, it can display an exist- 
ing row in read-only mode. In addition, you can use the control to insert new rows and to update 
existing ones. You control the mode of theoetaiisview with the oefauitMode property, which you 
can set to Readonly, Insert, and Edit, respectively. You see how to configure theoetaiisview 
and set theoefauitMode property next. 

^^^^^^Q Inserting Data with the DetailsView Control 

In this exercise, you see how to use theoetaiisview control to let your users insert new rows into the 
Genre table. As With the Gridview example, the next exercise requires no coding from your side. All 
you need to do is drag and drop a few controls, set a few properties, and you're done. Obviously, these 
code-free pages have limitations that makethem lessuseful in more advanced scenarios. Therefore, 
later in this chapter, you see how to extend and customize these controls. 

1. Go back to the Genres, aspx page in VS and make sure it's in Design View. 

2. Drag and drop a oetaiisview control from the Data category of theToolbox immediately 
below the Gridview. If you have trouble dropping the control below the Gridview but above the 
sqioatasource control, you Can simply drop it on the sqioatasource; VS then adds the markup 
of the dropped control before the one you drop it on. 

3. 0 pen the control's Smart Tasks panel if it didn't open automatically and hook up the control to 
the existing sqioatasourcei by selecting that name from the Choose Data Source drop-down list. 

4. On the same Smart Tasks panel, select the Enable Inserting item. 

5. Open the control's Properties Grid by pressing F4 and then locate the oefauitMode property in the 
Behavior category. Set the oefauitMode to Insert. The code for the Oetaiisview should now 
look like this: 

<asp: DetailsView ID= "DetailsViewl " runat=" server" AutoGenerateRows="False" 
DataKeyNames= " Id" DataSourceID= " SqlDataSourcel " Def aultMode= " Insert " 
Height="50px" Width="125px"> 
<Fields> 

<asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" 

ReadOnly="True" SortExpression="Id" /> 
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /> 
<asp : BoundField DataField= " SortOrder " HeaderText = " SortOrder " 

SortExpression="SortOrder" /> 
<asp : CommandField ShowInsertButton="True" /> 
</Fields> 
</asp : DetailsView> 
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6. Save the changes to the page, and pressCtrl4f 5 to open it 
up in your browser. Beiow thecridviewyou shouid now 
see the controis that enabie you to insert a new genre, as 
shown in Figure 13-6. 

7. Insert a new genre such as Disco or Dance. M ai<e sure you 
enter both a name and a sort order (a number) and then 
ciici< the Insert iini<. You may need to page to the iast page 
of the Gridview by ciici<ing one of the numbers at the bot- 
tom of the screen in the Pager bar to seethe new row. 

How It Works 



Id 

Naiue 

SortOrder 

Edit Delete Select 

1 

Rap and Hip-Hop 

14 

Edit Delete Select 

2 

Pop 

12 

Edit Delete Select 

3 

Jazz 

8 

Edit Delete Select 

4 

Hard Rock 

3 

Edit Delete Select 

5 

Indie Rock 

7 

Edit Delete Select 

6 

Punk 

1 

Edit Delete Select 

1 

Rock 

2 

Edit Delete Select 

8 

Grunge 

4 

Edit Delete Select 

9 

Alternative Rock 

9 

Edit Delete Select 

10 

Re^ae 

11 


1 2 


Name 


SortOrder 


Insert Cancel 


FIGURE 13-6 


Identicai to the other data-bound controis, you hooi< up 
theDetaiisviewto a data source controi by setting the 
DatasourceiD property. Becauseyou ai ready have a wori<ing 
sqiDatasource controi on the page, you can simpiy reuse that. 
The Detaiisview exposes different views, for read-oniy, insert, 

and edit modes. By setting theDefauitMode to insert, you force the controi to switch to insert mode, 
which meansyou automaticaiiy get a Ul for entering detaiisfor the genre, and Insert and Cancei iini<s. 
The Detaiisview controi is actuaiiy pretty smart. W hen you point it to the sqioatasource controi, it 
isabieto figure out the oataKeyNames property, which it set to id: 

<asp : Detaiisview ID="DetailsViewl" runat=" server" AutoGenerateRows=" False" 
DataKeyNames="Id" DataSourceID="SqlDataSourcel" . . . 

It aiso understands that the id coiumn is an identity coiumn in the database, and therefore hides it in 
the Insert screen (shown in Figure 13-6) by setting msertvisibie to False. Because the database gen- 
erates this ID automaticaiiy, there is no point in ietting the user enter a vaiuefor it. 

W hen you enter some vaiues and ciici< the Insert iini<, a process simiiar to updating with the Gridview 
tai<es piace. The Detaiisview coiiects the reievant information from the page's controis (the Name and 
the SortOrder) and forwards them to the sqioatasource. This controi in turn pushes the new vaiues 
in the parameters for the insert statement and then sends the command off to the database, which 
inserts the new row in the Genre tabie. If you ciici< the Insert iini< without entering a name or sort 
order, you'ii get an error. In this and iater chapters you see how to modify the data-bound controis to 
inciude vaiidation functionaiity. 


W hen you dropped the Genre tabie on the Genres, aspx page eariier in this chapter, VS not oniy 
created a bunch of controis for you, but it aiso stored information about the database in your web 
.conf ig fiie. The next section expiains how this wori<s and why it is important. 

Storing Your Connection Strings in Web.config 

The first time you dropped the Genre tabie on your page, VS created a sqioatasource controi 
for you. To teii this controi what database to access, VSaiso created a connection string in the 
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Web.conf ig file Under the <connectionStrings> element and pointed the SqlDataSource to this 

connection string. The setting In web.config looks like this: 

<connectionStrings> 

<add name="PlanetWroxConnectionStringl" connectionString="Data Source= 
(localdb) \vll . 0 ;AttachDbFilename= | DataDirectory | \PlanetWrox.mdf ; 
Integrated Security=True" 
providerName=" System. Data . SqlClient " /> 
</connectionStrings> 

The SqlDataSource then accesses thIs Connection string: 

<asp : SqlDataSource ID="SqlDataSourcel" runat=" server" 

ConnectionString="<%$ ConnectionStrings : PlanetWroxConnectionStringl %>" 

This code uses expression syntax to refer to the connection string In the web.config. It asks the 
Web.config filefor the Connection string that listens to the name pianetwroxconnectionstringi. It 
also reads the providerName attrlbuteto figure out how Its Internal code should talk to thedatabase. 


NOTE In addition to ttie expression syntax that uses <%$ %> fo bind control val- 
ues to resources like a connection string, you'll also come across similar syntax 
that uses <%# %>. This is called data-binding expression syntax and it enables 
you to bind control values to data that comes from data sources like a database. 
You see more about data-binding expression syntax in this and the next two 
chapters. 


Storing your connection strings In web.config Is considered a very good practice. By centralizing 
your connection strings you make It much easier to modify them when your database changes (for 
example, when you switch from a development environment to a production server). N ever store 
your connection strings directly In Code Behind files or In the markup section of the page. You'll 
seriously regret that the day you have to change your connection string and have to wade through 
all the pages In your site looking for connection strings. 

The Express Local DB edition of SQL Server that you have used so far enables you to work with 
databases that are attached to SQL Server on the fly when you need them. Take a look at the actual 
connection string to see how this works: 

Data Source= (localdb) \vll . 0, • 

AttachDbFilename= | DataDirectory | \ Plane tWrox.mdf ; 
Integrated Security=True; 

This connection string consists of three parts (which are all on one line In your conf ig file). The 
value of the first part contains the data source to Identify the SQL Server that Is targeted, which In 
this case Is a Local DB Instance of SQL Server 2012. Qther valid data sources you may come across 
Include . (just a dot, to denote the local machine), .\sqiExpress, to target a named Instance ver- 
sion of SQL Server Express running on the local machine (where sqiExpress Is the Instance name), 
or something like M achlneN ameor M achlneN ame\l nstanceN ame to target a remote machine or a 
named Instance on a remote machine. 
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AttachDbFiieName Contains a path to your SQL Server Express database. The |DataDirectory | 
placeholder is expanded to the full and physical path of theApp_Data folder at run time. So, when 
your pages load and the sqioatasource needs to connect to the database, it will open the file 

PlanetWrox.mdf in C:\BegASPNET\Site\App_Data\. As an alternative tO AttachDbFiieName 

you'll also come across initial catalog in other connection strings. The initial catalog points 
to a database available on the SQL Server you are using. You see more of this in Appendix B. 

The last part of the connection string has to do with security. With Integrated Security, the account 
used by the web server is used to connect to the database. In the case of VS and IIS Express, this 
account is the one you use to log on to your machine. In case you're using the full version of IIS, this 
account is an account named after an Application Pool in IIS, or a special account called N etwork 
Service. Chapter 19, which deals with deployment, and Appendix B, which explains how to connect 
to SQL Server, dig deeper into security-related issues. 

So far you have seen most of the database concepts that were introduced in the previous chapter. 
You saw creating (with theoetaiisview in insert mode), reading (with the seiectcommand and 
thecridview). Updating (inline within the cridview and an updatecommand), and deleting (with 
the delete option in thecridview and a Deietecommand). M oreover, you saw sorting that can be 
enabled in thecridview with just a single setting. What you haven't seen is filtering, a way to limit 
the data that is presented in the page. In the next section you see how to create a filter that enables 
you to display reviewsthat belong to a certain genre. You create the filter in the M anagement sec- 
tion in a new page called Reviews. aspx, which will be your main entry point for managing the 
reviews in your website. Subsequent sections build on top of this, gradually expanding the Reviews 
page with more useful features. 

Filtering Data 

As you learned in the previous chapter, you use a where clause to filter your data. VS and ASP.N ET 
come with a bunch of tools that make creating filters very easy. To filter data, the sqiDatasource 
control (and other data source controls) have a <seie ctParameters> element that enables you to 
supply values at run time that are used for filtering. These values can come from a variety of sources, 
including the ones described in the following table. 


WITH A 

THE VALUE IS RETRIEVED FROM 

Control Parameter 

A control in the page, such as a DropDownList or a TextBox. 

CookieParameter 

A cookie that is stored on the user's computer and that is sent to the 
server with each request. 

FormParameter 

A value posted in the form that has been submitted to the server. 

Parameter 

A variety of sources. With this parameter, you set the value through code. 

Prof ileParameter 

A property on the user's profile. The ASP.NET Profile is discussed in full 
detail in Chapter 17. 

QueryStringParameter 

A query string field. 

SessionParameter 

A value that is stored in a session, which is a server-side, user-specific 
store of data that exists during a user's visit to a site. 
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Because these parameters all behave more or less the same, it's easy to use them In your own code. 
0 nee you understand how to use one of them, you'll quickly be able to use the others as well. You 
seethe controiparameter at work In the next exercise, where you use a DropDownList with all the 
genres to filter a list of reviews that belong to the chosen genre. 


TRY IT OUT 


Setting Up the Filter 


To make long lists of data easier to manage. It's a good Idea to offer them to the user In smaller, blte- 
slze blocks. For example, when you need to present a list with reviews In your database, you could 
enable your users to filter them by genre. A DropDownList with the genres to limit the reviews In the 
Gridview to those that belong to the selected genre would be the perfect solution for that. You see how 
to build this next. 

1. Createa new Web Form called Reviews. aspx In the Management folder, and makesure It uses 
Code Behind and Is based on the new M anagement master page. Change the Title of the page to 

Planet Wrox - Management - Reviews. 

2. Add a link to this page In the master page for the M anagement section: 

<li><a href =" -/Management/Genres . aspx" runat=" server ">Manage Genres</a></li> 
<li><a href =" -/Management/Reviews . aspx" runat=" server" >Manage Reviews</a></li> 

</ul> 

3. Go back to Reviews . aspx and switch the page Into Design View. From the Standard category of 
the Toolbox, drag a DropDownList control Into the page. On Its Smart Tasks panel, select Enable 
AutoPostBack and click the Edit Items link. Insert an Item with Its Text set to Make a selection, 
and then clear Its value that was Inserted for you automatically. 

4. Once you return from the LIstltem Collection Editor dialog box, the Smart Tasks panel for the 
drop-down list Is still open. Click the Choose Data Source Item and choose <N ew data source> 
from the drop-down list at the top of the screen. The Data Source Configuration Wizard, shown In 
Figure 13-7, appears. 

5. Click Database, leave the ID set to sqiDatasourcei, and click OK. 

6. In the dialog box that follows, select the connection string called pianetwroxconnectionstringi 
from the drop-down list and click N ext. 

7. Verify that the radio button for Specify Columns from a Table or View Is selected. Also ensurethat 
Genre Is selected In the drop-down list with table names and then select the id and Name columns 
In the Columns section. Click the ORDER BY button, choose sortorder from the Sort By drop- 
down list, and click OK. When you're done, your Configure Data Source wizard should look like 
Figure 13-8. 

8. Click N ext and then Finish to have VS create the sqiDatasource for you. You return to the Data 
Source Configuration Wizard for the drop-down list where you can now set up a field that Is dis- 
played In the drop-down list for the genres and a field that serves as the underlying value In the list. 
Choose N ame as the field to display and leave the second drop-down list set to Id. You should end 
up with the screen shown In Figure 13-9. 
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Data Source Configuration Wizard 


Choose a Data Source Type 


Where will the application get flata from? 


SQL ^ Q «i ^ <e> 

Database Entity LINQ Object Site Map XML File 


Select a data source type from the box above. Descriptive text for the selected data source will appear here. 


Specify an ID for the data source: 



FIGURE 13-7 


Configure Data Source - SqIDataSourcel 


Configure the Select Statement 


How would you like to retrieve data from your database? 

O Specify a custom SQL statement or stored procedure 
Specify columns from a table orview 
Name; 
Genre 


SELECT statement: 


SELECT [Id], [Name] FROM (Genre) ORDER BY [SortOrder) 


r~| Return only unique rows 



Cancel 


FIGURE 13-8 
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Refresh Schema 


FIGURE 13-9 


OK 


9. Click OK to close the dialog box and finish setting up the data source for the drop-down list. 

10. With theDropDownList control still selected in Design View, press F4 to open up its Properties 
Grid and set the property AppendDataBounditems to True. Switch to M arkup View, and if the 
static Listitem that instructs your users to select an item does not have a value attribute, add it 
manually and set it to an empty string. Your final code should look like this: 

<asp:DropDownList ID="DropDownListl" runat=" server" DataSourceID="SqlDataSourcel" 
DataTextField="Name" DataValueField="Id" AppendDataBoundItems="true" 
AutoPostBack= " True " > 
<asp : Listitem Value=" " >Make a selection</asp : Listltem> 

</asp :DropDownList> 

<asp : SqlDataSource ID="SqlDataSourcel" runat=" server" 

ConnectionString=" <%$ ConnectionSt rings : PlanetWroxConnectionStringl %>" 
SelectCommand=" SELECT [Id], [Name] FROM [Genre] ORDER BY [SortOrder] " > 

</asp : SqlDataSource> 

11. Save all your changes and press Ctrl4f 5 to open the page in the browser. You should now see a 
drop-down list with all the genres in the database ordered by their sortorder column. 0 nee you 
choose a new genre from the list, the page posts back to the server. N othing else happens because 
you didn't tie any logic to the DropDownList control, but you see how to do this in the next 
exercise. 
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How It Works 

At the end of this exercise you end up with code similar to what VS created automatically when 
you dropped a cridview on the page in an earlier exercise. You have a data-bound control (the 
DropDownList) that gets its data from a data source control (the sqiDatasource control). W hat's dif- 
ferent is that the way you set things up gave you a lot more flexibility with regard to the code that is 
generated. Instead of relying on VS to generate a SQL statement for all the columns in the database, 
you now chooseonly the two columns that you need. Additionally, because the sqiDatasource doesn't 
require any updates to the data source, you only needed to provide a seiectcommand. You also used the 
ORDER BY button to control the order in which the items are added to thelist. 

With the SqiDatasource control Set up, displaying the data it returns in a DropDownList control 
is pretty easy. You start by pointing the DropDownList to the correct data source using the 
DatasourceiD attribute, and then set up theDataTextPieid and DatavaiueFieid to tell the Con- 
trol what columns to use for the text displayed in the control and the underlying value. By setting 
AppendDataBounditems to True, you Can preserve the item that you add in your code manually. With 
this setting turned off, the static item Make a selection would have been cleared as soon as the 
data-bound items were added. 


W ith the filter control set up, the next step is to create the cridview that displays reviews for the 
selected genre. You see how to do this in the next exercise. 

^^^^^^Q Applying the Filter 

In this Try It Out you add another sqioatasource that gets its data from the Review table. By creat- 
ing a filter (the where clause in the SOL statement) you can limit the number of items displayed in the 
grid to those that belong to a specific genre. The genre chosen in thedrop-down list you created in 
the previous section is sent into the sqiDatasource control's seiectparameters Collection using an 

<asp : ControlParameter>. 

1. Switch the Reviews, aspx page to Design View and drag a cridview from the Data category of the 
Toolbox on top of the existing sqiDatasource control. Thecridview is added right above it and 
its Smart Tasks panel opens. 

2. In theChoose Data Source drop-down list, choose <New data source>. In theData Source 
Configuration Wizard, clicl< Database (just as with the wizard for the genres that is shown in 
Figure 13-7) and clicl< OK. 

3. In the dialog box that follows, select the Planet Wrox connection string from thedrop-down list 
and click N ext again. 

4. Select the Review table in the N ame drop-down list and then make sure the asterisk (*) ischecked 
in the Columns list to select all columns. In the preceding chapter I recommended not to use 
SELECT *, but it's 0 K to do so for this exercise. Later in this chapter you see how to fix this. 

5. Click theWH ERE button, which enables you to set up a where clause using the 
Seiectparameters. In the dialog box that follows, enter the details so the screen ends up like 
Figure 13-10. 
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Add WHERE Clause 

Add one or more conditions to the WHERE clause forthe statement. For each condition you can specify either a literal value 
ora parameterized value. Parameterized values get their values at runtime based on their properties. 


Parameter properties 
Control ID: 


Genreld 


Operator; 


DropDownListl 


Default value: 


SQL Expression: 


IGenreld) = 9Genreld 


WHERE clause: 


SQL Expression 


Value: 


DropDownListl .SelectedValue 


FIGURE 13-10 


For some reason, each of your controls may show up twice in the Control ID drop-down list. It 
doesn't matter which of the DropDownListl options you choose. 

6. Clicl< the Add button to add the selection to the where clause list at the bottom of the screen and 
click OK. 

7. Bacl< in the Configure Data Source wizard, clicl< Next. To test the query, clicl< theTest Query 
button. If you set up the parameter correctly, a dialog box pops up enabling you to enter a value. 
Enter a number that you know exists in the Genre table (such as 2) and click OK. If rows exist in 
the Review tablefor the chosen genre, they aredisplayed in theTest Ouery window. Finally, click 
Finish to finalize the wizard. If you get a dialog box about refreshing parameters, click Yes to have 
the code in M arkup View updated for you. 

8. Save all your changes and open Reviews. aspx in your browser. 


COMMON MISTAKES If you get an error stating that the "input string was not 
in a correct format," ensure that you set the value of the static Listitem in the 
drop-down list to an empty string (" ") as shown in the preceding exercise. 


9. Select a new item in the drop-down list. The page refreshes, and now shows the reviews that belong 
to the chosen genre. If the page doesn't refresh, ensure that you set AutoPostBack to True in the 
previous exercise. At this stage the page looks rather messy because the cridview contains many 
columns but in the next Try It 0 ut you see how to fix this. 
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How It Works 

For the most part, this exercise works the same as a previous exercise where you dispiayed a iist with 
theavaiiabie genres. W hat's different this time is the way the sqiDatasource is able to filter the rows 
from the Review table based on the selection you made in the drop-down list. Tal<ea lool< at the code 

for the SqlDataSource tO 566 hOW this WOrl<S: 

<asp : SqlDataSource ID="SqlDataSource2 " runat="server" 

Connect ionString= "<%$ Connect ionStrings : Plane tWroxConnectionStringl %> " 
SelectCommand=" SELECT * FROM [Review] WHERE ( [Genreld] = (SGenreld) " > 
<Selec t Parameters > 

<asp : ControlParameter ControlID= "DropDownListl " Name= "Genreld" 
PropertyName="SelectedValue" Type="Int32" /> 
< /Select Parameter s> 
</asp : SqlDataSource > 

T he SQ L statement for the select command contai ns a parameter for the cenreid denoted by the @ 
Genreld Variable in the select statement. That means that the SQL statement returns rows from 
the Review table only for a specific genre. At run time, the value for this parameter is retrieved from 
the control defined in the ControlParameter element. In this example, the code is set up to get the 
value from the DropoownListi control. VS l<nows that in order to get the selected value from the 

DropDownList it should aCCeSS itS SelectedValue property, SO it addS that as the PropertyName for 

the ControlParameter. If you have the need to use a different property, you can simply change it in the 
ControlParameter element's declaration. 

W ith this code set up, thecridview asl<s the sqioatasource for its data. This data source in turn asl<s 
the DropDownList for the item that the user has selected in the list. This value is inserted in the SQL 
statement, which is sent to the database. The results that are returned from the database are sent back 
through thedata source to thecridview, which uses them to create theHTM L tablein the browser. 

W hen you choose M ake a Selection from the drop-down list, you get an empty page with no rows. In 
this case, theoropoownList returns an empty string as its value (defined in the value property), which 
is converted to nuii, the database equivalent of nothing. This in turn causes the query to return no 
rows from the Review table. 


Until now, you've relied on the code-generation tools of VS to set up thecridview and the 
DetailsView. By default, VS creates a column (for thecridview) or a field (for the DetailsView) 
for each column that it finds in the data source. It's smart enough to recognize some of the underly- 
ing types of thedata in the data source so you get a nice checkBoxFieid for boolean (bit) fields in 
the database, but that's about it. To further customize the look and feel of these data controls, you 
need to customize their columns and Fields collections. 


CUSTOMIZING THE APPEARANCE OF THE DATA CONTROLS 


By default, the cridview and Detaiisview render columns or rows automatically based on the 
data they receive. Alternatively, you can have VS create a number of fields or columns for you when 
you attach the control to a data source. But, more often than not, you want to change what you 
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see on-screen, be it fewer columns, different coiumn lieadings, or different controls to display data. 
Fortunately, this is really easy to do with the Fields editor in VS. In the next section you see how to 
use this editor to create and modify the different types of built-in columns and fields. In the section 
that follows, you see how to customize the fields even further with user-defined templates. 


Configuring Columns or Fields of Data-Bound Controls 

Within the<coiumns> or <Fieids> element of thecridview and theoetaiisview, you can add the 
types of fields shown in the following table. 


FIELD TYPE 


BoundField 

The default field for most database types. It renders as simple text in read- 
only mode, and as a TextBox in edit mode. 

ButtonField 

Renders as a link or a button enabling you to execute a command on the 
server. 

CheckBoxField 

Renders as a read-only check box in read-only mode, and as an editable 
check box in edit mode. 

CommandF i e 1 d 

Enables you to set up various commands, including editing, inserting, updat- 
ing, and deleting. 

HyperLinkField 

Renders as a link (an <a> element). You can set properties like 
DataNavigateUrlFields, DataNavigateUrlFormatString, and 
DataTextField to influence the behavior of the hyperlink. You see more of 
this in the next exercise. 

ImageField 

Renders as an <img> element in the browser. 

TemplateField 

Enables you to define your own look and feel for various templates, like 
ItemTemplate, InsertltemTemplate, and EditltemTemplate. 


TRY IT OUT 


Clearly, each field type serves a distinct purpose so you can choose the one that best fits your needs. 
You see some of these field types in more detail in the next exercise. 

Customizing GridView Columns 

In this exercise, you see how to do the following in the Reviews .aspx page: 

Use the Fields editor to customize the fields for thecridview with reviews. 

>" Use a HyperLink column to Create a linl< to a details page that enables you to manage the details of 
a review. 

> Format the output of the existing BoundField columns. 

> Use a custom function in the Code Behind to have full control over the output in a 

TemplateField. 
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A later exercise shows you how to create the details page to insert new and edit existing reviews. 

1. In Reviews. aspx, Open the Smart Tasks panel for the sqiDatasource2 control in Design View 
and clicl< Configure Data Source. Clicl< N ext to skip the connection string screen, and then 
complete the screen as shown in Figure 13-11 by selecting the id, Title, Authorized, and 
createDateTime columns from the Review table. M ake sure the SQ L Statement box also contains 
the WHERE clause filter that you set up earlier. You may have to set this up again using the steps 
from the previous exercise because VS sometimes seems to lose this information. 


Confiflu« Data Source -SolDataSQi 


lurceZ 


Configure the Select Statement 


How would you like to retrieve data from your database? 

O Specify a custom SQL statement or stored procedure 
® Specify columns from a table orview 

Name: 
[Review 

Columns: 


□ * 
aid 

0 Title 

□ Summary 

□ Body 

1 I Genreld 
0 Authorized 

B | 

□ UpdateDateTime 


I I Return only unique rows 


SELECT statement; 


SELECT [IdL [Title], (Authorized! [CreateDateTime] FROM [Review] WHERE ([Genreld] = (SGenreld) 


FIGURE 13-11 


Click the Advanced button and have VS generate commands for the insert, update, and delete 
statements by checking off the first item. You can leave the Optimistic Concurrency check 
box— which deals with detecting changes to the row since it was last loaded from the data 
source— cleared. Click OK to close the Advanced SOL Generation Optionsdialog box, then 
click Next and finally Finish to update the SOL statement in the source for the page. When asked 
whether you want to refresh the fields and keys for thecridview, click Yes. 


COMMON MISTAKES If both options in ttie Advanced SQL Generation Options 
dialog box are grayed out, check your table in the database using SQL Server 
Management Studio. Make sure that you made the id column of the Review table 
the primary key and an identity column as explained in the preceding chapter. 
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2. At this stage, VS has created columns for thecridview in M ari<up View. To remove those items 
and define your own, open the Smart Tasl<s panel for the cridview and clicl< Edit Columns. This 
brings up the Fields dialog box. If the Selected Fields list contains items, use the Delete button (with 
the big X ) to clear the list first. 

3. In the Available Fields list, select Authorized under BoundField (not the one under CheckBoxField) 
and then clicl< the Add button to copy the item to the Selected Fields list. Repeat this step for the 
createDateTime field. Y our dialog box now lool<s lil<e Figure 13-12. 


Fields 


Available fields: 


nl (All Fields) 
BoundField 

I Title 

I Authorized 

! ■■■■ I CreateDateTime 
CheckBoxField 
wl AuthnriTpH 


BoundField properties; 



Selected fields: 


I Authorized 

I CreateDateTime 



Accessibilitjr 


A 


AccessibleHeaderText 



A 

Appearance ^H^^^H 




FooterText 


a 


HeaderimageUrl 




HeaderText 

CreateDateTime 



Behavior 




ApplyFormatlnEditMode 

False 



ConvertEmptyStringToNull 

True 



hItmlEncode 

True 



HtmlEncodeFormatString 

True 



InsertVisible 

True 



NullDisplayText 





r.i. . 

V 


HeaderText 

The text within the header of this field. 


n Auto-generate fields 
Refresh Schema 


Convertthis field into a TemplateField 


OK 


Cancel 


FIGURE 13-12 


4. In the Available Fields at the top of the screen, select HyperLinkPieid and then click theAdd but- 
ton to add the item to the Selected Fieldslist as well. M ovethenyperLinkFieidto the top of the 
list by clicking the button with the up arrow twice. Then, using the Properties G rid on the right, set 
the following properties on the HyperLinkPieid: 


PROPERTY 

HeaderText 

DataNavigateUrlFields 
DataNavigateUrlFormat String 
DataTextField 


SET ITS VALUE TO 

Title 
Id 

AddEditReview . aspx? Id= { 0 } 
Title 


5. 


In the list with Available Fields, click commandpieid and click theAdd button again. Then set the 

HeaderText Of the Item yOU jUSt inserted to Delete and ShowDeleteButton tO True USing the 
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Properties Grid. Tiiis enabiesyou to deiete reviews from tlie database using tliecridview iater. 
The Fields diaiog box sliouid now iooi< iii<e Figure 13-13. 



- CheckBoxField 
gl Authorized 
I J HyperLinkField 
; qI ImageField 
1 Jl ButtonField 

gl I CommandField 
i TemplateField 

n. J nvnamirFipId 


Selected fields: 


Jl HyperLinkField 
I Authorized 
I CreateDateTime 
^ Delete 


□ Auto-generate fields 
Refresh Schema 


H 



' CausesValidation 

True 


InsertVisible 

True 


ShowCancelButton 

True 


H ShowDelete Button 

True [ V 


Hp^iov^diSutton 

False 


ShowHeader 

False 


ShowlnsertButton 

False 


ShowSelectButton 

False 


SortExpression 



ValidationGroup 



Visible 

True 


^ Styles ^^^^^^^^^^^^^^^1 


> ControlStyle 





V 

ShowDeleteButton 



Whether the field should display a delete button to the 


user. 




Convert this field into a TemplateField 


OK 


Cancel 


FIGURE 13-13 


6. Ciici< tile Authorized coiumn in tiie Selected Fields list and then click the blue Convert This Field 
into a TemplateField link visible at the bottom-right of the dialog box in Figure 13-13. 

7. Click the CreateDateTime COlumn On the left and set its DataPormatString property to {0:g}. 

8. Click OK to apply the changes to the source code. 

9. Switch to M arkup View and remove the <EdititemTempiate> for the Authorized field. The 
Gridview displays reviews only in read-only mode, so you don't need this template. 

10. M odify the Label control in the itemTempiate of the Authorized field SO it ends up like this; 

<asp:Label ID="AuthorizedLabel" runat="server" 

Text='<%# GetBooleanText (Eval ( "Authorized" ) ) %>' /> 

11. Switch to the Code Behind of the page by pressing F7 and add the following function— which 
returns the text Yes or No depending on the boolean value that you pass— to the top of the class 
file, right after the inherits line in VB.N ET and after the opening curly brace in C#: 

VB.NET 

Inherits System. Web .UI . Page 
Protected Function GetBooleanText (booleanValue As Object) As String 
Dim authorized As Boolean = CType (booleanValue, Boolean) 
If authorized Then 
Return "Yes" 
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Else 

Return "No" 
End If 
End Function 

C# 

public partial class Management_Re views : System. Web. UI . Page 
{ 

protected string GetBooleanText (object booleanValue) 
{ 

bool authorized = (bool) booleanValue; 

if (authorized) 

{ 

return "Yes"; 

} 

else 


} 


return "No"; 


12. Save all your changes (press Ctrl +Shift+S) and press Ctrl 4f 5 to open Reviews .aspx in the 

browser. Choosea genre from the drop-down list and you'll seea list of reviews appear. Note that 
the Authorized column now shows the text Yes or No. The createDateTime column shows the 
date and time in a short format. Figure 13-14 shows the result for the Indie Rock genre. 


^ Planet Wrox - Management,.. 


• Management Home 

• Manage Genres 

" Manage Reviews 


Indie Rock v{ 

Title 

ADthorized 

CreateDateTime 

Delete 

Sonic Youth; Daydream Nation live in Roundhouse. London 

Yes 

11 14 2007 5:19 PM 

Delete 

Sonic Youth: Davdxeam Nation live at Lowlands, Biddinghuizen 

Yes 

11, 14.2007 5:27 PM 

Delete 

Day & Age by The Killers - Excellent album, but is it better than before? 

Yes 

11.24/2008 10:01 
PM 

Delete 



The Pams of Berne Pure at Heart - One of the best new British bands from 

Yes 

2/3,2009 2:45 PM 

Delete 

the U S '' 

P.J. Harvey & John Parish - A Woman a Man Walked By 

No 

4/1/2009 1:08 PM 

Delete 

Battle for the Sun by Placebo - Possibly the best album of 2009 aheady 

Yes 

6,9,2009 9:01 PM 

Delete 

Some Youth: The Eternal - Takes time to set used but then.... 

Yes 

6/10,2009 9:33 PM 

Delete 

Farm by Dmosaur Jr 

Yes 

6,232009 10:36 PM 

Delete 


FIGURE 13-14 


N otethat the title in the first column of the cridview now links to a page where the ID of 
the review ispassed in the query string field id: http://iocaihost:i049/Management/ 
AddEditReview.aspx?id=i. You Create this Add/Edit page later in this chapter. 

How It Works 

You started off by modifying the seiectcommand for the sqiDatasource. Instead of selecting all col- 
umns using SELECT *, the SQL statement now contains a subset of the columns, making the page load 
slightly faster: 

<asp : SqlDataSource ID= "SqlDataSource2 " runat=" server" 

ConnectionStrlng="<%$ ConnectionStrings : PlanetWroxConnectionStringl %>" 
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SelectCommand=" SELECT [Id] , [Title] , [Authorized] , [CreateDateTime] 
FROM [Review] WHERE ( [Genre Id] = @GenreId)"> 

</asp : SqlDataSource> 

You then used the Fields dialog box to modify the different fields that are displayed by theoridview. 
You created the Title column using a HyperLinicFieid: 

<asp:HyperLin]<:Field DataNavigateUrlFields="Id" DataTextField=" Title" 

DataNavigateUrlFormatString="AddEditReview. aspx?Id={o} " HeaderText= "Title " > 
</asp :HyperLinltField> 

TheDataNavigateuriFieids property Contains a comma-separated list of fields you want to use in 
theDataNavigateuriFormatstring property. In this case, Only One field is used. To display the value 
of this field you use placeholders such as {0} in theDataNavigateuriFormatstring property. For 
example, a review with an ID of 10 will end up with a HyperLinic column having this Navigateuri: 
AddEditReview.aspx?id=io. With this setup, the {o} is replaced with thevaluefor thefirst field in the 
DataNavigateuriFieids property. If you defined more fields separated by a comma, you would access 
them with {1}, {2}, and so on. 

TheDataTextFieid is Set to the column Title. This tells the HyperLinit to render its Text attribute 
with the title of the review, as shown in Figure 13-14. 

You also set the DataPormatstring property of the bound field for the createDateTime column: 

<asp : BoundField DataField= " CreateDateTime " DataFormatString= " { 0 : g} " 

HeaderText= " CreateDateTime " SortExpression= " CreateDateTime " / > 

TheDataFormatstring enables you to define the format in which the underlying data is displayed. In 
this case, the lowercase letter g is used to display both the date and the time in short format (without 
seconds). You can find more information about the different format strings in the M SDN documenta- 
tion at http : //tinyurl . com/DateFormatters45. 

You then converted the Authorized column to a template column. A template column gives you full 
freedom with regard to the content you are presenting. Essentially, you can add almost anything you 
see fit as content for the column, including H TM L and ASPX controls. In this exercise, you changed the 
Label SO that it gets its text from a custom function using the data binding expression syntax <%# %>: 

<asp:Label ID="AuthorizedLabel" runat=" server" 

Text='<%# GetBooleanText (Eval ( "Authorized" ) ) %> ' x/asp : Label> 

Two things are used hereto mal<e this worl<. First, look at the Evai ("Authorized" ) statement. 
This is called a one-way data binding expression and results in the value of the Authorized column 
being passed as an object to the custom GetBooleanText method. This method in turn converts the 
incoming value to a Boolean and then returns Yes or no, depending on the value of the Authorized 
column in the database. This isjust a simple exampleto demonstrate how to call custom methods in 
your Code Behind during data binding. H owever, the principle remains the same for more complex 
methods: you pass one or more arguments to a Code Behind method using Evai (" coiumnName" ) . The 
method in the Code Behind accepts these arguments as objects, casts them to an appropriate type, 
and then uses them as appropriate. In the end, the method can return a string with any text or H TM L 
you see fit. 
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TheHyperLink for the Title COlumn that you set up points to a page called AddEditReview.aspx. 

This page enables you to create new and update existing reviews. You see how to create this page in 
the following section. 

UPDATING AND INSERTING DATA 

Earlier in this chapter I discussed how to do simple updates with thecridview and the 
sqiDatasource controls. Although this built-in update behavior is fine in many circumstances, it is 
not always extensive enough to meet all your demands. 

Fortunately, controls I il<e FormView and DetailsView enable you to tweal< their lool< and feel, giving 
you a lot more flexibility in theway your end users worl< with their data. In the next section you see how 
to use the DetailsView to give the user a much easier interface to insert and edit reviews in the database. 

Using DetailsView to Insert and Update Data 

Earlier in this chapter you learned how to set up a simple oetaiisview control and fully rely on 
VSand the control itself to render the relevant user interface in the browser. Obviously, this default 
behavior is often not enough. W hat if you wanted to influence the controls used in the interface? For 
example, what if you wanted to use a DropDownList instead of a simple TextBox for the genre? And 
what if you wanted to add one or more validation controlsthat you learned about in Chapter 9? Or 
what if you wanted to manage some of the data being sent to the database programmatically? All of 
this is possible with theoetaiisview control, its template-based columns, and the numerous events 
that the control fires at various stages in its life cycle. 

First, however, you need to learn a bit more about the different events that the data-bound and 
data source controls fire. The following table lists some of the events that theDetaiisview, the 
FormView, and theListview expose and raise during their lifetime. The cridview has similar 
events, but they start with row instead of item. Because the DataList and Repeater controls do not 
natively support editing of data, they do not have any of these events. 


EVENT 

DESCRIPTION 

Itemlnserting 

Fires right before the insert command is executed against the data source. 
This is an ideal location to change the data that is about to be sent to the 
database. 

Itemlnserted 

Fires right after the insert command has been executed against the data 
source. 

ItemUpdating 

Fires right before the update command is executed against the data source. 
This is an ideal location to change the data that is about to be sent to the 
database. 

ItemUpdated 

Fires right after the Update command has been executed against the data 
source. 

ItemDeleting 

Fires right before the Delete command is executed against the data source. 

ItemDeleted 

Fires right after the Delete command has been executed against the data 
source. 
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These six events fire at very convenient moments in tiie iifeof tlie controi: riglit before and riglit 
after tiie data for tiie operation is sent to tlie database. You see iiow to use tiiem in tlie next 
Try It Out. 


TRY IT OUT 


Managing Data with the DetailsView Control 


In tiiis exercise you create tiieAddEditReview.aspx pagetiiat you created a iini< for eariier in tiie 
Reviews page. You add a Detaiisview to tliis page, customize most of its fieids by implementing tem- 
plate fields, and then handle some of the events of the control to change its behavior. After you're done, 
you have everything you need to create, list, update, and delete reviews in your website. 

1. In the Management folder. Create a new Web Form and call it AddEditReview.aspx. Again, select 
your preferred programming language and base it on the master page for the M anagement section. 

G ive it a Title of Planet Wrox - Management - Insert and Update Reviews. 

2. Switch the page to Design View and drop a Detaiisview control on the page. In the Smart Tasks 
panel that opens automatically, choose <New data source> from theChoose Data Sourcedrop- 
down list. Clicl< the Database icon and then clicl< OK. In thedialog box that follows, choose the 
connection string from the drop-down list and clicl< N ext. 

3. Enter the details as displayed in Figure 13-15. 

N ote that all fields of the Review are selected explicitly, except for the createDateTime field. 



How would you like to retrieve datd from your database? 

O Specify a custom SQL statement or stored procedure 
® Specify columns from a table or view 

Name: 
^Review 

Columns: 


□ * 

0 Title 
0 Summary 
0 Body 
0 Genreld 
0 Authorized 

□ CreateDateTime 

01 


UpdateDateTime 


I I Return only unique rows 


SELECT statement: 


SELECT [Id], [TitleL [Summary], [Body], [Genreld], [Authorized], [UpdateDateTime] FROM [Review] 


< Previous 


FIGURE 13-15 
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4. Click the WH ERE button to set up a seiectParameter that retrieves the review ID fromthequery 
string by compieting the diaiog box as shown in Figure 13-16. 


Add WHERE Clause 

Add one or more conditions to the WHERE clause for the statement. For each condition you can specify either a literal value or 
a parameterized value. Parameterized values get their values at runtime based on their properties. 


Operator; 


Source: 


QueryString 


SQL Expression: 


|ld| = 0ld 


WHERE clause: 


SQL Expression 


Parameter properties 
QueryString field: 


Value: 


RequestQueryStringC'ld") 


Add 


FIGURE 13-16 


D on't forget to type id i n the Q ueryStri ng field text box. 


7. 


8. 


9. 


Clicl< the Add button to add the parameter to the WH ERE Clause list at the bottom and then clicl< 
OK to close the dialog box. 

Back in the Configure Data Source wizard (shown in Figure 
13-15), click the Advanced button, select the option to generate 
INSERT, UPDATE, and DELETE Statements, and click OK to close 
the dialog box. Finally, click N ext and then Finish to finalize 
the data source wizard. 

0 n the Smart Tasks panel for the DetailsView, select the 
options for Inserting and Editing as shown in Figure 13-17. 


0 n the Properties G rid for the De tailsViev 

to Insert. 


set Def aultMode 


Double-dick an empty spot of the page in Design View to set 
up a page_Load handler and enter the following code: 

VB.NET 

Protected Sub Page_Load{ sender As Object, e As EventArgs) 
If Request .QueryString. Get ( "Id" ) IsNot Nothing Then 


Details View Tasks 

Auto Formrat... 

Choose Data Source: SqIDataSourcel 

HI 

Configure Data Source,,. 


Refresh Schema 


Edit Fields... 


Add New Field,.. 


Q Enable Paging 


@ Enable Inserting 


@ Enable Editing 


Q Enable Deleting 


Edit Templates 



FIGURE 13-17 


Handles Me. Load 
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DetailsViewl .Def aultMode = DetailsViewMode.Edit 
End If 

End Sub 

C# 

protected void Page_Load (object sender, EventArgs e) 
{ 

if (Request. Query-String. Get ("Id") != null) 
{ 

DetailsViewl. Def aultMode = DetailsViewMode.Edit; 

} 

} 

10. Open the Reviews, aspx page in Design View and drag theAddEditReview.aspx page from the 
Solution Explorer onto the page below thecridview. This creates a link to this page so you can 
insert new reviews. Switch to Marl<upView and change the text between the <a> tags to insert 

New Review! 

<a href ="AddEditReview.aspx">Insert New Review</a> 

11. Save all your changes and open AddEditReview.aspx in your browser. You should get the default 
layout for the control, with simple text boxes for all the columns in the data source. Fill in the 
fields as shown in Figure 13-18. 











, ^ ^ localhoit:49&7ti/[vlanageme 

n.' AddEditReview.aspx; 

■fr <?||41- Google fi\ # 






• Management Home 

• Manage Genres 

• Manage Reviews 

Title 

This is the title 


Summary 

This is the SLimmary 


Body 

This IS the body 



Genreld 

1 



Authorized 

a 



UpdateDateTime 

201 2/9/3 



Insert Cancel 



FIGURE 13-18 


COMMON MISTAKES If you get an empty screen, make sure you set 
Def aultMode to Insert. Be Sure the Genreld thiat you enter matches one of the 
genres in the Genre table in the database or you'll get an error when you try to 
insert the item. Also be sure you enter a valid date using the yyyy/mm/dd format, 
where y stands for year, m for month, and d for day. 


Clicl< Insert to insert the item in the database. At first, not much seems to happen except that the 
controls are now all cleared. However, you can now locate the new review through the Reviews 
.aspx page by following these two steps; 
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>- Click the M anage Reviews iini< in tlie menu on tlie left. 

>■ Select the right genre from the drop-down list at the top of the page. If you used the scripts 
from the preceding chapter to create the data in your database, and you entered i for the 
Genreid When inserting the review, the genre is Rap and H ip-H op. 

When you have found your review, you can clicl< its title and you'll betaken to AddEditReview 
.aspx, where you can change the review's details again. 

How It Works 

M ost of this exercise should be familiar by now. TheDetaiisview works the same for inserting as 
theDetaiisview for genres you saw earlier. W hat's different is how updates are handled. The code 
in the Code Behind looks at the query string and if it finds an id query string parameter, it flips the 

DetailsView into edit mode: 

VB.NET 

If Request. QueryString. Get ("Id") IsNot Nothing Then 

DetailsViewl .DefaultMode = DetailsViewMode . Edit 
End If 

C# 

if (Request. QueryString. Get {"Id") != null) 
{ 

DetailsViewl .DefaultMode = DetailsViewMode . Edit ; 

} 

W hen the control is in edit mode, it knows what to do. It calls the sqioatasource and requests its 
data. The sqioatasource in tum retrieves the ID of the review from the query string, accesses the 
database, and then returns the correct review, which is displayed on the page. W hen you subsequently 
click the Update link, the sqioatasource fires itsupdatecommand to Send the changes to the database. 


This exercise provides a nice foundation for thefollowing exercise, where you extend the 
DetailsView by implementing custom templates with validation controls and set up various event 
handlers to respond to the control's events. 

Right now, the page with theoetaiisview looks quite dull. It would look a lot better and be easier 
to use if it had thefollowing features: 

> A text area instead of a single-line text box for the Summary and Body fields 

>" A drop-down list for the genre filled with the available genres from the database 

>- Automatic updating of the updateDateTime column 

>- Validation controls to stop you from leaving required fields empty 

>• Automatic redirection to the Reviews, aspx page after an item has been inserted or updated 

The next exercise shows you how to implement all of these features. 
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TRY IT OUT 


Customizing the DetailsView and Handling Its Events 


This walk-through is quite long and has a large number of steps. Remember you can always download 
the final version of this page from the Wrox website in case you want to compare your result with mine. 

1. M akesure AddEditReview.aspx is in Design View and bring up the Fields editor for the 
DetailsView control by clicking Edit Fields on its Smart Tasks panel. Locate the updateDateTime 
column in the Selected Fields list and set its visible property to False. 

2. Click the Title column in the Selected Fields list and then click the blue link with the text Convert 
This Field into a TemplateField. Repeat this for the summary, Body, and cenreid fields and then 
close the Fields dialog box by clicking 0 K . 

3. Switch to M arkup View and add a TextMode attribute with its value set to MuitiLine for the four 
TextBox controls for the summary and Body fields. In addition, set their width and Height proper- 
ties to 500 and 100 pixels, respectively. M akesure you do this for both the EdititemTempiate 
and the insertitemTempiate. You should end up with the following code that shows the 
Summary field, but the codefor the Body field should be similar: 

<asp : TemplateField HeaderText=" Summary" SortExpression=" Summary" > 
<EditItemTemplate> 

<asp:TextBox ID= "TextBox2 " TextMode="MultiLine" Width="500" Height="100" 

runat=" server" Text='<%# Bind ( "Summary" ) %> ' ></asp :TextBox> 
</EditItemTemplate> 
< Insert I temTemplate> 

<asp:TextBox ID="TextBox2" TextMode="MultiLine" Width="500" Height="100" 

runat=" server" Text='<%# Bind ( "Summary" ) %> ' ></asp :TextBox> 
</ Insert I temTemplate> 
<ItemTemplate> 

<asp:Label ID="Label2" runat=" server" 

Text='<%# Bind { "Summary" ) %> ' ></asp : Label> 
</ltemTemplate> 
</asp : TemplateField> 

4. Add a RequlredFieldValldator in the EdititemTempiate and the InsertitemTempiate Of 

both the Title and the summary rows. You can drag and drop it from theToolbox directly in 
M arkup View or enter the required code manually. Using a code snippet makes this even easier: 
position your mouse on an empty, new line below the TextBox, type requiredfieidvaiida- 
tor, and press Tab. VS inserts a RequiredFieidvaiidator for you and automatically assigns the 
controiTovaiidate property With the ID of the previous TextBox defined in the code. 

M ake sure you hook up all validators to their respective TextBox controls in the template by set- 
ting the ControiTovaiidate property and providing a useful error message. W hen you're done, 
the summary field should look likethis: 

<asp : TemplateField HeaderText=" Summary" SortExpression=" Summary" > 
<EditItemTemplate> 

<asp:TextBox ID= "TextBox2 " TextMode="MultiLine" Width="500" Height="100" 

runat=" server" Text='<%# Bind ( "Summary" ) %> ' ></asp : TextBox> 
<asp : RequiredFieidvaiidator ControlToValidate="TextBox2 " 

runat=" server" ErrorMessage="Enter a summary"> 
</asp : RequiredFieldValidator> 
</EditItemTemplate> 
< Insert I temTemplate> 
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<asp:TextBox ID="TextBox2" Textiy!ode= "MultiLine " Width="500" Height="100" 

runat=" server" Text='<%# Bind { "Summary" ) %> ' ></asp :TextBox> 
<asp : RequiredFieldValidator ControlToValidate="TextBox2 " 

runat=" server" ErrorMessage="Enter a summary"> 
</asp :RequiredFieldValidator> 
</ Insert I temTemplate> 
<ItemTemplate> 

<asp:Label ID="Label2" runat=" server" Text='<%# Bind ( "Summary" ) %>'> 
</asp:Label> 
</ltemTemplate> 
</asp : templatef ield> 

The Title and Body fields should look similar to summary. TheTextBox for the Title field 
doesn't have the TextMode, width, and Height properties applied, whereas the Body field ismiss- 
ing the RequiredFieldValidator. Other than that, the fields should look pretty similar to the 

Summary field. 

5. Switch to Design View and drag a new sqiDatasource control next to sqiDatasourcei that is 
already on the page. Open the new control's Smart Tasks panel and click Configure Data Source. 
Select the Planet Wrox connection string from the drop-down list and click N ext. Select the id and 
Name columns from the Genre table and set up an order by clause on the sortorder column by 
clicking the ORDER BY button and choosing sortorder from the Sort By drop-down list. When 
you click OK, the Configure Data Source screen looks like Figure 13-19. 



O Specify a custom SQL statement or stored procedure 
® Specify columns from a table orview 

Name: 

Genre 


Columns: 

EF 

Sjd 

□ SortOrder 


SELECT statement; 

SELECT [Id], [Name] FROM [Genre] ORDER BY [SortOrder] 


< Previous 


Next> 


Finish 


Cancel 


I I Return only unique rows 
WHERE... 


ORDER BY... 


Advanced... 


FIGURE 13-19 
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6. Click N ext and then Finish to finaiize the Configure Data Source wizard. 

7. Seiectthenew sqiDatasource (caiied sqiDatasource2) in Design View and change its ID to 
GenresDatasource using the Properties G rid so it's easier to recognize in the page. 

8. Switch to M arkup View, locate the InsertltemTemplate for the Cenreld of the DetailsView, 

and remove its contents (the TextBox control). At the place where you removed the TextBox, add 
a DropDownList by dragging it from the Tool box into M arkup View. Your code looks like this: 

<asp : TetnplateField HeaderText = " Genre Id" SortExpression=" Genre Id" > 
<EditItemTemplate> 

<asp:TextBox ID="TextBox4" runat= " server " 

Text='<%# Bind ( "Genreld" ) %> ' ></asp : TextBox> 
</EditItemTemplate> 
< Insert I temTemplate> 

<asp: DropDownList ID="DropDownListl" runat="server"> 
</asp :DropDownList> 
</ Insert I temTemplate> 

</asp : TemplateField> 

9. Switch to Design View, right-click the DetailsView, and choose Edit Templates Field[4] - 
Genreld, as shown in Figure 13-20. If you don't see this menu item, you may need to click one 
of the rows with controls— such as the summary row— first to put the focus on thenetaiisview 
correctly. 


AddEditReview.aspx* -0 X 


Tr X Cut 
□1 Copy 
ni Paste 

Paste Alternate 

Si ^ 

X Delete 


Ctrl+X 
Ctrl+C 
Ctrl+V 



View Code 



View in Browser (Firefox) 

CtrU Shift +W 


Edit Master 

Ctrl+M, Ctrl+M 


View in Page Inspector 

CtrUKCtrUG 


Show Smart Tag 

Shift+Alt+FlO 


Auto Format- 



Edit Template 

k 


End Template Editing 


a 

Refresh 


> 

Properties 

Alt+Enter 


SqIDataSource - SqIDataSourcel 
SqlDataSource - GenresDataSource 


Field[l] -Title 
Field[2] - Summary 
Field[3] - Body 
Field[4]- Genreld 
FooterTemplate 
HeaderTemplate 
EmptyDataTemplate 
PagerTemplate 


0 


L 


FIGURE 13-20 
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10. W hen the control is in template editing mode, you can access the oropDownList directly. 0 pen 
the Smart Tasl<s panel for theDropDownList and select Choose Data Source. In the Data Source 
Configuration Wizard, choose Genresoatasource from the data source drop-down list and Name 
and Id from the other two drop-down lists (see Figure 13-21). If Name and id don't appear in the 
drop-down lists, clicl< the blue Refresh Schema linl< at the bottom of the screen. If you don't seethe 
GenreDatasource listed, but you See sqiDatasource2 instead, mal<esureyou renamed the con- 
trol correctly as described in step 7. 


Data Source Configuration Wizard 


Choose a Data Source 


Select a data source: 


GenresDataSource 


Select a data field to display in the DropDownList: 


Select a data field for the value of the DropDownList: 


Id 


Refresh Schema 


FIGURE 13-21 


11. Clicl< OK to close theData Source Configuration Wizard. 

12. Bacl< on the Smart Tasks panel of theDropDownList control, clicl< Edit DataBindings. In the dialog 
box that follows, clicl< seiectedvaiue in the list on the left and then choose cenreid from the 
Bound To drop-down list on the right, as shown in Figure 13-22. If you find that the Field Binding 
radio button at the top-right of the screen is read-only, clicl< the Refresh Schema linl<. In the dialog 
that appears, clicl< OK. When you return to the DataBindings dialog box the item should now be 
enabled. 
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DropDownListI DataBindings 

Select the property to bind to. You can then bind it by selecting a field. Alternatively, you can bind it using a custom code 
expression. 


Bindable properties; 


^ DataSource 
^ Enabled 
«9 Selectedlndex 
«9 SelectedValue 
S Visible 


I I Show all properties 


Refresh Schema 


Binding for SelectedValue 

® Field binding: 
Bound to: 

Format: 

Sample: 

O Custom binding: 
Code expression; 


Bindf'Genreld") 


[vl Two-way databinding 


OK 


Cancel 


FIGURE 13-22 


13. Click OK to close the dialog box. The code for the insertitemTempiate now looks like this In 
M arkup View: 

< Insert ItemTemplate> 

<asp:DropDov?nList ID="DropDovmListl" runat= " server " 

DataSourceID= "GenresDataSource " DataTextField= "Name " DataValueField= "Id" 
SeleotedValue='<%# Bind ( "Genreld" ) %>■> 
</asp : DropDovmList> 
</ Insert I temTemplate> 

14. Copy the contents of the insertitemTempiate (the bolded code In the previous step) and paste 
It In the EdititemTempiate, Overwriting the existing TextBox control. This adds the same drop- 
down list to the Detaiisview In edit mode. 

15. Switch back to Design View, click the Detaiisview, and press F4 to open up the Properties Grid. 
Switch to the Events tab of the Properties Grid and double-click the following events. VS switches 
to the Code Behind file every time you double-click an event, so you need to switch back to the 
page (using Ctrl-fTab) to add the other events: 

^ Itemlnserted 
^ Itemlnserting 
^ ItemUpdated 
^ ItemUpdating 

W hen you're done, the event category of the Properties Grid should look like Figure 13-23. 


Updating and Inserting Data | 489 


16. Go into the Code Behind and modify the code as follows. 
N ote that the iteminserted and itemupdated han- 
dlers Call the EndEditing method (that you also need 
to add to the code), whereas Itemlnserting and 

ItemUpdating both Set the UpdateDateTime Value: 
VB.NET 

Private Sub EndEditing () 

Response .Redirect ( "Reviews .aspx") 
End Sub 


0- 


DebikViewl System.Web.UI.WebControls.DetailsView 

^^^^^^^^^^^1 DetailsView1_ltem}nserted 
Itemlnserting DetailsView1_ltemlnserting 
ItemUpdated DetaibViewl_ltemUpdated 
ItemUpdating DetaibView1_ltemUpdating 

Iteminserted 

Fires after an Insert Command is executed on the data source. 

FIGURE 13-23 


Protected Sub DetailsViewl_ItemInserted( sender As Object, 

e As DetailsViewInsertedEventArgs) Handles DetailsViewl . Iteminserted 
If e. Exception Is Nothing Then 

EndEditing 0 
End If 
End Sub 


Protected Sub DetailsViewl_ItemInserting (sender As Object, 

e As DetailsViewInsertEventArgs) Handles DetailsViewl . Itemlnserting 
e .Values ( "UpdateDateTime" ) = DateTime .Now 
End Sub 


Protected Sub DetailsViewl_ItemUpdated (sender As Object, 

e As DetailsViewUpdatedEventArgs) Handles DetailsViewl . ItemUpdated 
If e. Exception Is Nothing Then 

EndEditing 0 
End If 
End Sub 


Protected Sub DetailsViewl_ItemUpdating (sender As Object, 

e As DetailsViewUpdateEventArgs) Handles DetailsViewl . ItemUpdating 
e .NewValues ( "UpdateDateTime" ) = DateTime. Now 
End Sub 

C# 

private void EndEditing () 
{ 

Response .Redirect ( "Reviews .aspx") ; 

} 


protected void DetailsViewl_ItemInserted (obj ect sender, 
DetailsViewInsertedEventArgs e) 

{ 

if (e. Exception == null) 
{ 

EndEditing 0 ; 

} 

} 
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protected void DetailsViewl_ItemInserting (object sender, 
DetailsViewInsertEventArgs e) 

{ 

e. Values ["UpdateDateTime"] = DateTime.Now; 

} 

protected void DetailsViewl_ItemUpdated (obj ect sender, 
DetailsViewUpdatedEventArgs e) 

{ 

if (e. Exception == null) 
{ 

EndEditingO ; 

} 

} 

protected void DetailsViewl_ItemUpdating (object sender, 
DetailsViewUpdateEventArgs e) 

{ 

e.NewValues ["UpdateDateTime"] = DateTime.Now; 

} 

17. Finally, save all your changes and open AddsditReview.aspx in your browser. Leave all fields 
empty and click the Insert linl<. N otethat the validation controls kicl< in, preventing you from 
sending empty values to the server. Next, fill in valid values and click Insert again. You're now 
taken to Reviews, aspx. Locateyour review by choosing its genre from the drop-down list and 
then click its title to edit it. The DetailsView should now display all the values you entered previ- 
ously (see Figure 13-24). 


Me 

Oscar & the Wolf- Sumn 


Summaiy 

This review talks abouc their new albxmi "Summer Skin" 
released in 2012. 


Body 

To start otf, this is a great album! 

According to singer Hax Colorribie, their music sounds like a 
combination of dark melancholic pop with danceable rhythms. 

B 

Genreld 

Indie Rock v| 

Aulliorized 

0 

Insert Cancel 


FIGURE 13-24 

How It Works 

The DetailsView and the sqiDatasource controls take care of most of the hard work for you. You set 
up different templates that enable a user to insert new rows and update existing ones and then the two 
controls take care of the rest. W hen you click the Insert link, the controls are validated using JavaScript 
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as you saw in previous chapters. T lie same vaiidation is carried out at tlie server by tlieDetaiisview 
controi to ensure tlie submitted data meets tlie criteria you set. If tliedata isvaiid, tlie DetailsView 
controi inserts or updates tliedata, depending on the mode it's in. To see liow this wori<s, tai<e a iooi< at 

tlie InsertltemTemplate for tlie Title COiumn first: 

< Insert I temTemplate> 

<asp:TextBox ID="TextBoxl" runat= " server " Text='<%# Bind ( "Title" ) %>'> 
< /asp : TextBox> 

<asp :RequiredFieldValidator ControlToValidate="TextBoxl" 

runat=" server" ErrorMessage=" Please enter a title"> 
</asp : RequiredFieldValidator> 
</ Insert I temTemplate> 

Tlie most important piece of code in tliis snippet is tlie way tlie Text property of tliexextBox is bound. 
Eariier you saw tlie one-way binding syntax using Evai tliat basicaiiy outputs tlievaiue of a bound 
coiumn. Witli Bind, liowever, sometliing mucin morepowerfui occurs. Basicaiiy, Bind enabiesyou to 
express a data binding between a coiumn from tlie sqiDatasource and a controi in tlie page in two 
directions. In tliis exampie, tlie Title coiumn of a review is bound to tlieTextBox. Tliis means tliat 
wlien tlie controi must dispiay its data (for exampie, wlien updating an existing row), it i<nows tliat it 
must dispiay tlie Title of a review. But more importantiy, on postbaci<, after you ciici< tlie Update iini<, 
tlie controi stiii understands tlie reiationsliip between tlieTextBox controi and tlie Title coiumn. So, 
wlien you ciici< Update after mai<ing clianges to tlie review in tlie page, tlie Detaiisview coiiects aii tlie 
bound data from the form (the Title, summary. Body, Genreid, and wlietlier tlie item is autliorized) 
and tlien sends it to tlie sqiDatasource controi tliat lias parameters set up for eacli of tlie reievant coi- 
umns of tlie Review tabie: 

<asp : SqiDatasource ID="SqlDataSourcel" runat=" server" 

<UpdateParameters> 

<asp : Parameter Name="Title" Type="String" /> 

<asp : Parameter Name=" Summary" Type="String" /> 

<asp : Parameter Name="Body" Type="String" /> 

<asp : Parameter Name=" Genre Id" Type="Int32" /> 

<asp : Parameter Name= "Authorized" Type= "Boolean" /> 

<asp : Parameter Name="UpdateDateTime" Type="DateTime" /> 

<asp : Parameter Name="Id" Type="Int32" /> 
</UpdateParameters> 
</asp : SqlDataSource> 

Eventuaiiy, tlie sqiDatasource grabs aii tlie parameter vaiues, injects tliem in tlie updatecommand, and 
tlien sends tliem to tlie database. 

Tliis wori<s niceiy for aii columns of tlie Review tabie tliat liavea form controi attaclied to tliem, but 
wliat about tlie otiier coiumns? You may liave noticed tliat createDateTime was not a part of any of 
tlie SqiDatasource Commands. Because tlie database is set up to insert today's date and time auto- 
matical iy, tliere's no need to include it in the code. TheupdateoateTime column is a different story. 
Obviously, you don't want your users to enter the value for this column manually. Instead, the system 
should l<eep track of it automatically. That's why you hid the control from the user interface by set- 
ting itsvisibie property to False. H owever, because the insert and update commands still expect 
a value for this column, you need to find a different way to insert it. H ere's where the inserting and 
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Updating events coiTie into play. Take a look at the iteminserting event handler to get a general 
understanding of how this works: 

VB.NET 

Protected Sub DetailsViewl_ItemInserting (sender As Object, 

e As DetailsViewInsertEventArgs) Handles DetailsViewl . Iteminserting 
e .Values ( "UpdateDateTime" ) = DateTime.Now 
End Sub 

C# 

protected void DetailsViewl_ItemInserting (object sender, 
DetailsViewInsertEventArgs e) 

{ 

e. Values ["UpdateDateTime"] = DateTime.Now; 

} 

As you saw earlier, iteminserting fires right before the msertcommand is sent to the database. 
This is a perfect location to supply (default) values for the columns in your table that have no corre- 
sponding control in the user interface, as is the case with UpdateDateTime. This code simply sets the 
UpdateDateTime valueto today's date and time. This value is then sent to the database where it is used 
to assign a value to the Review table's UpdateDateTime column. 

The same principle applies to the itemupdating command. Within that event, you need to index the 
Newvaiues Collection instead of thevaiues collection, but the principle is the same. 

You might argue that in thecaseof an insert command, you don't need to set the UpdateDateTime. 
After all, the database inserts a value for you automatically when you insert a new row. H owever, 
to make the distinction between inserting and updating, you need to do a lot more manual work. 
You have to remove the column from the msertcommand and then remove the column from the 
<insertparameters> Collection as Well. Although in itself this is not a lot of work, you get into trouble 
when you later try to modify the SQ L commands for the sqiDatasource, because the insert and 
Update commands are now out of sync. Simply setting the UpdateDateTime through code, as in this 
case, solves many of these problems. 

W hen the sqiDatasource control is done with inserting or updating, it fires its iteminserted or 
itemupdated events, respectively. I nside these events, the code checks if e . Exception is nuii/Nothing. 
Without this check, the user would be redirected to the Reviews, aspx page regardless of whether an 
error occurred. With this check, the user is taken back to Reviews. aspx page by calling EndEditing o 
only if the database update succeeded: 

VB.NET 

Private Sub EndEditing () 

Response .Redirect ( "Reviews . aspx" ) 
End Sub 

C# 

private void EndEditing () 
{ 

Response . Redirect ( "Reviews . aspx" ) ; 

} 
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A typical reason for an error during tlie update miglit be an incorrect genre ID. If you didn't set up 
tlieDropDownList correctiy, tile database wouid be given an invalid genre ID and tlie insert or 
UPDATE wouid faii. By not redirecting wiien an error occurs, tiie error message is displayed on-screen 
so you get a chance to fix it. 

W ith the discussion of the various events that the Detaiisview control fires, you have come to the 
end of this chapter. By now, you should have a reasonably good understanding of how to perform 
CRUD operations using the Gridview, Detaiisview, and sqiDataSource controls. 

Useful as the SqiDataSource control may be, many developers don't lil<eor use it. One of the 
biggest drawbacks of this control is the fact that your SQ L statements end up directly in your 
ASPX pages. This can be really problematic if you start changing your database schema. Even if 
you thinl< there's no need to do that ever, you can be pretty sure you'll need to change it oneday. 
Once you do that, things are lil<ely to breal<. For example, if you rename theName column of the 
Genre tableto Description, your application Will breal<. H owever, you won't notice that until 
run time because VS is not able to check the database schema against the command texts defined 
in the SqiDataSource controls. You have a few ways to work around this. One solution is to build 
strongly typed objects and work with theobjectDatasource control instead. Details of this solu- 
tion are beyond the scope of this book, but you're invited to check out my website where I've pub- 
lished an article series demonstrating this concept: http: //bit . iy/9woD7D. The concepts presented 
in this series are quite advanced, so you may want to postpone digging into it until you've finished 
this book. 

Another alternative is to make use of the AD O.N ET Entity Framework, the topic of the next 
chapter that also shows you how to use the EntityDatasource control and the Listview and 
DataPager controls to perform similar actions without the need to write embedded SQL statements 
in your code. 

PRACTICAL TIPS FOR DISPLAYING AND UPDATING DATA 

The following list provides some practical tips for displaying and updating data: 

> Always store your connection strings in the web.conf ig file. Although it may seem easy to 
store them directly in the sqiDatasource control in a page, you'll get in trouble when you 
need to make changes to your connection string later. 

>" Always consider adding validation controls to your data entry pages. It makes it a lot easier 
for your users to find out what data is required, and in what format they should deliver it, 
while you protect your system from receiving and processing incorrect data. 

>■ If you have long lists of data to present, always consider turning paging on for controls like 
the Gridview. Userstend to get lost if you present them with lists containing many items. 
Generally, a page size of somewhere between 10 and 20 items works best. 

Consider renaming the controls in the page to something other than their default val- 
ues. For example, in the previousTry It Out exercise you renamed sqiDataSource2 to 
GenresDatasource. This makes it much easier to see which data source is needed to get 
information about the genres. W ith only a few controls in a page this isn't really an issue, but 
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as soon as your page grows, it is increasingiy important to clioose distinguisliing names for 
your controis. 

> Consider setting tiie cssciass of tlie vaiidation controis in AddEditReview.aspx and iiooi< 
tiiem up to a CSS ciass. You can create tliem in a styiesiieet in tiie styles foider in tiieroot 
for now and iini< tliatfiieto tlie master page. In a iater cliapter you create a separate tlieme 
for the M anagement section. 

SUMMARY 

Tiiis ciiapter buiit on tiie generai i<nowiedgeyou gained in Ciiapter 12 about accessing a database 
tlirougli SQL. It started off witli a discussion of tlie numerous controis in tiie Data category of tiie 
Tooibox in Visuai Studio. 

Tiiese controis can be spiit into two groups: data-bound controis and data source controis. Tlie first 
group of controis— inciuding tiie cridview, tiieDetaiisview, and tiie Listview— is used to dispiay 
data in a web page. M ost, but not aii of tiiem enabieyou to maintain your data as weii, by exposing 
inserting, updating, and deieting capabiiities. 

Tiie controis in tiieotiier group, tiiedata source controis, liaveno visuai appearance tiiemseives. 
Tiiey serve as a bridge between tiie user interface and tiie database. A number of different data 
source controis exist, eacii providing access to a specific i<ind of data store. In tiiis ciiapter you saw 
tiie sqiDatasource controi, wliicii enabies you to retrieve data from many different i<inds of reia- 
tionai databases. 


EXERCISES 


1. If you need to create a user interface that enables a user to display, filter, edit, and delete data 
coming from a database, what Is the best control to use? How do you hook up that control to the 
database? 

2. Which control would you pick if you want to display a simple list of the genres in your database in 
the following format? 

<ul > 

<li>Punk</li> 

<li>Hard Rock</li> 

<li>Jazz</li> 

<li>Techno</li> 
</ul> 

3. What's the difference between a BoundFieid and a TempiateFieid? When would you use which 
of the two? 


4. What's the best place to store your connection strings? How do you access the connection strings 
from that location? And why shouldn't you store them in a page? 


You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 

Connection string 


Data source controls 


A string containing information necessary to connect to a database sucli as 
SQL Server 

A set of ASP.NET controls that serve as a bridge between a data source 
(a database, an XIVIL file, and so on) and the data-bound controls 


Data-binding expres- 
sion syntax 


Syntax used to bind values from data sources to control properties such as 
labels and text boxes. Example: 

Text='<%# Bind ("Title") %>' 

Bind is used for two-way binding, whereas Eval is used to display read- 
only data 

Data-bound controls A set of ASP.NET controls that can display flat and hierarchical data 


Expression syntax 


InsertParameters 
UpdateParameters 
DeleteParameters 


A terse syntax to bind a variety of sources, including connection strings 
from the web . conf ig file, to control properties. Example: 

Connect ionString= 

"<%$ ConnectionStrings : PlanetWroxConnectionStringl %>" 

A set of parameters used to feed data into the data source controls to sup- 
port insert, update, and delete behavior 


Named instance 


The name of a specific SQL Server instance. Used to distinguish between 
multiple installations of SQL Server on the same machine 


SelectPa ra meters 


A set of parameters that can get their data from other sources (a query 
string, a cookie, and so on) and that can be used in the data source controls 
to filter data 


LINQ and the ADO.NET Entity 
Framework 


WHAT YOU WILL LEARN IN THIS CHAPTER: 


>• What LINQ is and what its syntax lool<s lil<e 

> The different forms of LINQ that are available and when they are 
appropriate to use 

> How to use the ADQ.NET Entity Framework 

> How to use the EntityDataSource Control to access the ADQ.NET 
Entity Framework 

>• How to use the Listview and DataPager controls 
WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 

www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the Chapter 14 dowhload. 

Language-I ntegrated Q uery (L I N Q ) is the query language that is tightly integrated with the 
programming languages used in the .N ET Framework. LINQ enables you to query data from 
within .N ET programming languages in the same way that SQL enables you to query data in 
a database. In fact, the LIN Q syntax has been modeled partially after theSQ L language, mak- 
ing it easier for programmers familiar with SQL to get started with LINQ. 

LINQ comes in a few different implementations, enabling you to access and query a wide 
variety of sources, including in-memory data, XML files, .N ET DataSets, and databases from 
your V B.N ET or C#code. In the next section you get a brief overview of the main LINQ pil- 
lars. The remainder of this chapter focuses on the LIN Q syntax and on theADQ .N ET Entity 
Framework (E F), a technology that enables you to work with databases without writing a lot 
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of code. The ADO .N ET Entity Framework uses LIN Q a lot under the hood, so you get a good shot 
at practicing your new LINQ sl<ills. 


INTRODUCING LINQ 

LINQ enables you to query data from a wide variety of data sources, directly from your program- 
ming code. LINQ isto .N ET programming what SQL isto relational databases. With straightfor- 
ward, declarative syntax you can query collections for objects that match your criteria. 

LINQ is not just an add-on that is part of the .N ET Framework. Qn the contrary, LINQ has been 
designed and implemented as a true part of the programming languages in .N ET. This means that 
LINQ is truly integrated into .N ET, giving you a unified way to query data, regardless of where that 
data comes from. In addition, because it is integrated into the language and not in a certain project 
type, LINQ is available in all kinds of projects, including web applications, Windows Forms appli- 
cations. Console applications, and so on. To help developers get familiar with LIN Q , its syntax is 
closely modeled after SQL, the most popular query language for relational databases. This means 
that LINQ has keywords such as select. From, and where to get data from a data source. 

To give you an idea of what a LIN Q query looks like, here's a quick example that shows a list of 
Wrox authors whose names contain the capital letter S; 

VB.NET 

Dim authors As StringO = New StringO {"Hanselman, Scott", "Evjen, Bill", 

"Haack, Phil", "Vieira, Robert", "Spaanjaars, Imar"} 
Dim result = From author In authors 

Where author. Contains ("S") 
Order By author 
Select author 
For Each author In result 

Labell.Text += author + "<br />" 
Next 

C# 

using System. Linq; 

string [] authors = new string [] { "Hanselman, Scott", "Evjen, Bill", 

"Haack, Phil", "Vieira, Robert", "Spaanjaars, Imar" } ; 
var result = from author in authors 

where author . Contains ( "S" ) 

orderby author 

select author; 

foreach (var author in result) 
{ 

Labell.Text += author + "<br />"; 

} 

Although the syntax used in this example is probably quite easy to follow, the example itself is really 
powerful. Given an array of strings containing author names, you can simply select all the authors 
whose names contain the capital letter S and order them in ascending order. It should come as no 
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surprise that in tliis example, tlie Label control displays my name and that of Scott H anselman 
because only those two names match the where criterion. N otice how in C# the code imports the 
System. Linq namespace. This is necessary to bring the LIN Q functionality into scope for your 
application. If you're finding that some keywords don't show up in Intel 11 Sense or VS gives you com- 
pilation errors on your LINQ queries, checl< that you have this namespace imported at the top of 
your codefile. In a VB website, this namespace is included by default. 

Of course, this example is only the beginning. The different types of LIN Q discussed in the follow- 
ing three sections enable you to create much more powerful queries against a wide variety of data 
sources. 

BecauseLINQ isso powerful and has so much potential, it has been integrated into manydif- 
ferent areas of the .N ET Frameworl<. Thefollowing sections introduce thedifferent LINQ 
implementations. 

LINQ to Objects 

This is the purest form of language integration. With LIN Q to Qbjects, you can query collections 
in your .N ET applications as you saw in the previous example. You're not limited to arrays because 
LINQ enables you to query almost any l<ind of collection that exists in the .N ET Frameworl<. 

LINQ to XML 

LINQ to X M L is the new .N ET way to read and writeX M L . Instead of typical XML query lan- 
guages lil<eX SLT or X Path, you can now write LIN Q queries that target XML directly in your 
application. 

LINQ to ADO.NET 

ADO.N ET is the part of the .N ET Framework that enables you to access data and data services like 
SQL Server and many other different kinds of data sources. ADQ .N ET is also used under the hood 
by the sqiDatasource control and is commonly used in "raw data access code"— code written in 
C#or VB.N ET that connects to a database without using the declarative data controls. With LIN Q 
to ADQ.N ET you can query database-related information sets, including LINQ to DataSet, LINQ 
to SQL, and LINQ to Entities. 

LINQ to DataSet enables you to write queries against theoataset, a class that represents an in- 
memory version of a database. 

LINQ to SQL enables you to write object-oriented queries in your .N ET projects that target 
M icrosoft SQL Server databases. The LIN Q to SQL implementation translates your queries into 
SQL statements, which are then sent to the database to perform typical CRUD operations. In the 
3.5 version of this book, this entire chapter was devoted to LINQ to SQL. However, in the mean- 
time, a lot has happened. M icrosoft has indicated that it will no longer actively develop LINQ to 
SQL. It will remain part of the .N ET Framework and Visual Studio for the foreseeable future, but 
M icrosoft probably won't be adding new functionality to it. The reason for this is the great overlap 
in functionality with the Entity Framework (EF). Almost anything you can do in LIN Q to SQL can 
be done in LINQ to Entities. However, this latter framework is a lot more powerful and offers many 
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more features than LINQ to SQL. Because it's more powerful, the Entity Framework is preferred 
over LINQ to SQL and as such it's the main topic of this chapter. 

For more information about the other types of implementations, checl< out the official LINQ 
homepage at http : //bit . ly/isypuj . 

INTRODUCING THE ADO.NET ENTITY FRAMEWORK 

EF is an Q bject Relational M apper (Q R M ) that supports the development of data-oriented soft- 
ware applications. With EF, you can tal<ea bunch of database objects I il<e tables and turn them into 
.N ET objects that you can access in your code. You can then use these objects in queries or use them 
directly in data-binding scenarios. EF also enables you to do the reverse; design an object model first 
and then let EF create the necessary database structure for you. 

Working with EF is pretty easy and quite flexible. Using a diagram designer, you drag and drop 
objects I ike tables from your database into your Entity model. The database objects you drop on 
the diagram become available as .N ET objects. For example, if you drop the Review table on the 
diagram, you end up with a strongly typed Review class. You can create instances of this class using 
LINQ queries and other means, as you see later in this chapter. 


NOTE The ADO.NET Entity Framework is a large and complex topic by itself. 
There's a lot more to it than what I can cover in this chapter For an in-depth 
iool< at EF, pick up a copy of the excellent book Programming Entity Framework, 
Second Edition by Julia Lerman. 


W hen you drop more than one related database table on your diagram, the designer detects the rela- 
tionships between the tables and then replicates these relationships in your object model. For exam- 
ple, if you had a Review instance created in code using some LIN Q to Entities query (as you see 
later), you could access its Genre property, which in turn gives you access to properties I ike Name: 

VB.NET 

Labell.Text = myRe view. Genre .Name 
C# 

Labell.Text = myReview. Genre .Name; 

Similarly, you can access the associated Reviews collection for a specific genre, for exampleto bind 
it to a data-bound control: 

VB.NET 

Repeaterl .DataSource = myGenre . Reviews 
C# 

Repeaterl . DataSource = myGenre . Reviews ; 

Don't worry about the actual syntax right now. You see a lot more of it in the remainder of this 
chapter. W hat's important to takeaway from this section is that EF creates a layer between your 
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.N ET application and your SQL Server database. T lie Entity Designer tai<es care of most of tlie 
wori< for you, providing access to a ciean object modei tliat you can use in your application. 


MAPPING YOUR DATA MODEL TO AN OBJECT MODEL 

\N\th EF, you map database items sucli as tables, columns, and relationships in the database to 
objects and properties in an object model in your application. VS comes with great tools to make 
this mapping as easy as possible, as you see in the following exercise. 


TRY IT OUT 


A Simple LINQ to Entities Example 


In this Try It Out, you see how to add an AD O.N ET Entity Data M odd file to your project, add data- 
base tables to the model, and then write a simple LIN Q query to access the data in the underlying tables. 

1. Open the Planet Wrox project that you have been working on so far. Right-click theApp_code 
folder, choose Add o Add N ew Item, and select your programming language on the left. Then 
click ADO.N ET Entity Data M odd, type pianetwrox as the name, and click Add to add the item 
to your project. If you don't seethe item in the list, check that you right-clicked App_code and not 
another folder like App_Data. 

2. On the dialog box that follows, make sure that Generate from Database is sdected and dick Next. 

3. In the Choose Your Data Connection step, make sure pianetwroxconnectionstringi is sdected 
in the drop-down and that the check box to store the settings in web.conf ig is checked. Your dia- 
log now looks like Figure 14-1. 


Entity Data Model Wizard 


Choose Vour Data Connection 


Which data connection should your application use to connect to the database? 


PlanetWroxConnectionStringI (Settings) 


New Connection.,, 


This connection string appears to contain sensitive data (for example, a password) that is required to 
connect to the database. Storing sensitive data in the connection string can be a security risk. Doy: : 
to include this sensitive data in the connection string? 

O No, exclude sensitive data from the connection string. I will set it in my application code. 

' Yes. include the sensitive data in the connection string. 
Entity connection string: 


metadata=res;//*/App_Code,PlanetWrox.csdl|res://*/App_Code.Pl3netWrox.3sdl| 
resi//*/App_Code.PlanetWrox.msi;provider=System,Data.SqiClient;provider connection string="data 
source=(LocalDB)\vl1,0;attachdbfilen3me=|DataDirectory|\PlanetWrox.mdf;integrated 
security=True;MultipleActiveResultSets=True;App=:EntityFramework" 


0 Save entity connection settings in Web.Config as: 


Plan etWroxE ntit i e s 


< Previous 


Next> 


Cancel 


FIGURE 14-1 
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Click N ext to go to the Choose Your Database Objects and Settings diaiog box. 


PlanetWrox.edmx[Diagram1]* -0 X 


S Properties 
H% Id 
A Name 
A SortOrder 


S Navigation Propertie 
Reviews 



A Title 
A Summary 
A Body 
A Genreld 
A Authorized 
A CreateDateTime 
A UpdateDateTime 
B Navigation Properties 
Genre 


FIGURE 14-2 


4. In this dialog box, expand Tables and then 
dbo, and then check off the Genre and Review 
tables. If you see a sysdiagrams table, leave it 
unchecked. This is a table used by SQL Server 
internally and you don't need it in your Planet 
Wrox model. If you're using an English version 
of VS, you get an option to pluralize or singu- 
larize names in the model automatically, which 
you should leave checked. For other languages 
you'll need to do this manually, as you see 
next. Finally, make sure you leave the option 
to include foreign key columns in the model 
checked. You see what that option is used for 
later in this chapter. Click Finish to add the 
model to your site. If you get a security warn- 
ing, click Do N ot Show This M essage Again 

and then click OK. Visual Studio uses what's called a T4 template to generate the code for you and 
by default you need to grant permissions to execute this template. 

5. VS adds a file called pianetwrox.edmx and two files with a . tt extension and then opens the 
Entity Designer for you in the main editor window, shown in Figure 14-2. It also created a Bin 
folder in the root of your site and added an assembly and an X M L documentation file needed by 
the Entity Framework. 

This Entity Designer shows you .N ET classes that have been generated based on the tables in your 
database. VS draws a line connecting the two classes, indicating it picked up the relationship that 
you created between the underlying tables in Chapter 12. If you don't seethe line, or you don't see 
Reviews at the bottom of the Genre class or Genre at the bottom of the Reviews class, make sure 
you set up your database as explained in Chapter 12. 

6. If you're using a non-English version of VS you need to pluralize the names of the entity sets and 
properties yourself. To do this, click the Genre class in the Designer, open its Properties Grid by 
pressing F4, and change the Entity Set N amefrom Genre to Genres. Repeat this for the Review 
class and change its Entity Set N ame to Reviews. Finally, click the Review property on the dia- 
gram for the Genre class (located under the N avigation Properties header in Figure 14-2), press F2 
to rename the item, and enter Reviews as the new name. Because a Review only belongs to a single 
Genre, you don't need to pluralize the Genre property of the Review class. 

7. Click somewhere on an empty spot of the designer surface and press F4 to open the Properties 
Grid. Change the Code Generation Strategy property from N one to Default. 

8. Save and close the diagram and then delete the files pianetwrox.tt and pianetwrox. context, tt 
from theApp_code folder. 

9. Open All. aspx from the Reviews folder, switch it into Design View, and drag a Gridviewfrom 
theToolbox onto the page. If you don't have this page, create it now and base it on your custom 
template. 
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10. Double-click the page in the gray, read-only area to have VS set up a handler for the page's Load 
event and add the following code. Be sure to read the next paragraph after the code example to 
learn how to solve an error you may get when typing in this code. 

VB.NET 

Protected Sub Page_Load( sender As Object, e As EventArgs) Handles Me. Load 
Using myEntities As New PlanetWroxEntities () 

Dim authorizedReviews = From review In myEntities .Reviews 

Where review. Authorized = True 
Order By review. CreateDateTime Descending 
Select review 
GridViewl.DataSource = authorizedReviews 
GridViewl . DataBind ( ) 
End Using 
End Sub 

C# 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

using (PlanetWroxEntities myEntities = new PlanetWroxEntities () ) 
{ 

var authorizedReviews = from review in myEntities .Reviews 

where review. Authorized == true 
orderby review. CreateDateTime descending 
select review; 

GridViewl.DataSource = authorizedReviews; 

GridViewl . DataBind ( ) ; 

} 

} 

N otice how you immediately get an error when you type PlanetWroxEntities because it's defined 
in a namespace that is not in scope. You can fix the problem in two ways. You can type imports 
pianetwroxModei if you'reusing VB.N ET or using pianetwroxModei; if you're using C #at the top of the 
code file. Alternatively, you can clicl< theword pianetwroxEntities once and then pressCtrl-f-. (Ctrl-fOot) 
to bring up a dialog box that lets you choose the fix for the problem, shown in Figure 14-3 for the C# lan- 
guage. Choose the first item and VS adds the necessary imports/using statement for you. In C#you can 
also right-clicl< theword pianetwroxEntities and then clicl< the Resolve menu to bring up a similar menu. 


protected void Page Load(object senderj EventArgs e) 

{ 

using (Pl_ajietWrgxETTti^^ myEntities = new PlanetWroxEntities()) 

{ 

. 


var a 

*{ ) using PianetwroxModei; [\. 

ews 

e 


PlanetWroxModel. PlanetWroxEntities 

descending 

GridV 

Generate class for "PlanetWroxEntities' 


GridV 

> 

} 

Generate new type... 





FIGURE 14-3 


11. Save all your changes and press Ctrl-ff 5 to open the page. You'll get a screen full of reviews that 
have been retrieved from the Review table in the database, as shown in Figure 14-4. 
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The page looks rather messy because of the way the data is presented in thecridview, but in later exer- 
cises you see how to improve the layout of the grid and the data. 



Oscar & the Wolf, 


This is the title 


Summary 


This review 
talks about 
their new 
album 
Summer 
Skin" 

released in 
2012. 


This is the 
summary 


Body 


To start off, this is 
a great albumi 
According to 
singer Max 
Coiombie, their 
music sounds like 
a combination of 
dark melancholic 
pop with 
danceable 
rhythms. 


This is the body 


CreateDateTime 


0 


B/9/2012 6:08:47 
AM 


B/9/2012 5:09:45 
AM 


UpdatePateTime 


B/9/2012 6:08:47 
AM 


9/3/2012 12:00:00 
AM 



FIGURE 14-4 


How It Works 

EF comes with an object-relational designer (accessible in VS) that enables you to create an object 
model that is accessible through code based on the tables in your database. By adding tables to this 
designer, VS generates code for you that enables you to access the underlying data in the database with- 
out writing a lot of code. The classes that are added to the designer are stored in the .edmx file and its 
CodeBehind files. Thedesigner file (theCode Behind of the pianetwrox.edmx file) containsa class 
that inherits from objectcontext, the main object in EF that provides access to your database. In the 
preceding exercise, this class is called pianetwroxEntities (named after the .edmx file) and you use it 
to access the data in the tables you added to thediagram. Although you normally don't need to look at 
the generated code, you can open the file pianetwrox. designer .vb or pianetwrox.designer.es file 
and see what code has been generated for you. The * .tt files you deleted enable you to customize the 
code that is generated based on the underlying data model. H owever, in most cases you don't have to 
do this, and you can rely on the default code generation instead. That'swhy you deleted these files, and 
configured theEF model to use its default code generation strategy. 

Thedesigner is smart enough to detect the relationships in the database and is thus able to create the 
necessary relationships in codeas well, as you saw in Figure 14-2. The model defines two main object 
types. Review and Genre, both of which also have col lection counterparts called Reviews and Genres, 
respectively These col lections are referred to as entity sets. N otethat on English versions of VS the 
designer has correctly pluralized the names of the Review and Genre tables (Reviews and Genres, respec- 
tively), making it easier to see what is a collection (Reviews) and what is a single instance of an object 
(Review). For Other language versions of VS, you had to apply this logic yourself using the Entity Designer. 

After the model has been generated, you can execute LI N Q queries against it to get data out of the 
underlying database. To access the data, you need an instance of the objectcontext class, which is 
created inside the using block in the code. A using block (using in C#) is used to wrap code that cre- 
ates a variable that must be disposed of (cleared from memory) as soon as you're done with it. Because 
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the myEntities Variable holds a (scarce) connection to the SQ L Server database, it's a good idea to 
wrap the code that uses it in a using block, so the object is destroyed at the end of the block and the 
connection is released. This myEntities object then exposes your data (such as reviews and genres) 
that you can use in a query: 

VB.NET 

Using myEntities As New PlanetWroxEntities ( ) 

Dim authorizedReviews = From review In myEntities . Reviews 

Where review. Authorized = True 
Order By review. CreateDateTime Descending 
Select review 

End Using 
C# 

using {PlanetWroxEntities myEntities = new PlanetWroxEntities {) ) 
{ 

var authorizedReviews = from review in myEntities .Reviews 

where review. Authorized == true 
orderby review. CreateDateTime descending 
select review; 

} 

Note that this query looks similar to the SQL that you learned in the previous chapters. Under the 
hood, the run time converts this LIN Q query into its SQL counterpart and executes it against the 
underlying database. Within this query, the variable review in the From clause is used to refer to the 
review in the other parts of the query (where, order By, and select), enabling you to specify the 
select, filter, and ordering criteria. 

W hat's important to realize is that EF uses a mechanism called lazy loading, which means sub objects 
are not loaded until you explicitly tell them to. W hat this means is that in the previous example the 
Genre properties of the Review objects you've queried arenuii in C#and Nothing in VB.N ET and 
don't contain any data. As soon as your code tries to access them, they are loaded by executing another 
query to the database. This can greatly improve performance if you don't need these sub objects. 
H owever, if you're sure you need them in your code beforehand, executing a separate SQL statement for 
each item results in a lot of overhead. In that case, you can preload theobjects with the initial query. To 
express that you want to include these objects as well, you use the include method for the types you 
want to query: 

VB.NET 

Dim authorizedReviews = From review In myEntities . Reviews . Include ( "Genre") 

Where review. Authorized = True 

C# 

var authorizedReviews = from review in myEntities . Reviews . Include ( "Genre") 

where review. Authorized == true 


With this addition to the query, the Review objects now have their Genre property correctly filled with 
data. Though this may seem a little counterintuitive and counterproductive at first, it's actually quite 
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a nicefeature. If you don't need the extra Genre property in a specific page, you don't tai<etlie perfor- 
mance liit of seiecting and returning tliese objects. If you do need tliem, aii you need to add is a singie 

Caii to Include. 

Besides tlie Reviews coiiection tlie modei aiso contains a Genres collection. W hen you want to select 
all the genres in the database, you can use this query: 

VB.NET 

Dim allGenres = From genre In myEnti ties .Genres 
Order By genre . Name 
Select genre 

C# 

var allGenres = from genre in myEnti ties .Genres 
orderby genre. Name 
select genre; 

In addition to these two separate objects and their collections, both objects have properties that refer 
to each other's type. For example, a Review instance has a Genre property that provides additional 
information about the genre to which the review was assigned. A Genre instance in turn has a Reviews 
collection property, giving you access to all reviews posted in that genre. You see later how to make use 
of these properties. 

From the l<eywords used in the first query in this Try It 0 ut, it's probably easy to see what the query 
does: It gets a list of all the reviews in the system that have been authorized and orders them in descend- 
ing order on their creation date. The result of the query is then assigned to the authorizedReviews 
variable. Notice that in both languages you can spread out the query over multiple lines to improve 
readability. This is not required, but you're encouraged to do it anyway because it mal<es your queries a 
lot easier to understand and maintain. 

You may notice some strange syntax in the query. The VB.N ET example doesn't use an as clause to 
define the type of the variable. Similarly, theC#snippet uses the var l<eyword, also without a type 
name. Although you may not conclude it from these code snippets, in both languages the variable 
authorizedReviews is Still Strongly typed and not just a variable with an undefined type. 


NOTE Strongly typed refers to the fact that the variable's type is explicitly 
defined when it's declared. Once you've defined the type for a variable (using 
Dim in VB or the type's name in C#) you cannot change it anymore at run time. 
Strongly typed languages — such as C# and VB.NET — bring many advantages, 
including the ability to check the types being used at compile time, something 
that a weakly typed programming language cannot do. 


Because the code didn't state the type for authorizedReviews (the example used Dim or var instead), 
.N ET needs a different solution to determine the type. This is done by a concept called type inference, 
where the compiler is able to infer the type for a variable by lool<ing at the right side of the assign- 
ment. In this case, the compiler sees that a list of Review objects will be returned from the query. 
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and correctly types the authorizedReviews variable as a generics type iQueryabie (Of Review) in 
VB.N ET syntax or iQueryabie<Review> in C #. Although this looks a littlescary and incomprehen- 
sible at first, it becomes much easier to understand if you simply read it as "a bunch of Review objects 
that you can access in queries." In most cases you can also explicitly specify the return type of the vari- 
able instead of using var or a Dim statement without a data type, but exceptions do exist, as you'll see 
later when anonymous objects are discussed. 

T hese Review objects are then assigned to the Datasource property of the cridview. I n previous chap- 
ters you saw how to use the Datasourceio property to connect a control such as the cridview to a 
data source control lil<ethe sqiDatasource. By using theDatasource property instead, you can assign 
the actual data yourself, which the control then uses to build up theUI: 

VB.NET 

GridViewl .DataSource = authorizedReviews 
GridViewl . DataBind { ) 

C# 

GridViewl . DataSource = authorizedReviews; 
GridViewl. DataBind {) ; 

By calling DataBind o on thecridview you instruct the control to display the individual Review 
objects on the page. Because the cridview control's AutoGeneratecoiumns property is True by 
default, the control creates a column for each property it finds on the Review object. Later you see how 
to customize the control and the data that is being assigned to theDatasource property. 


In the following section you learn more about the LIN Q query syntax, the language that drives the 
querying capabilities of .N ET. 


INTRODUCING QUERY SYNTAX 

The query you saw in the previous example is quite simple; it requests all the authorized reviews 
from the system and returns them in a sorted order. H owever, the querying capabilities of LIN Q 
are much more powerful than this. In this section you learn more about the LIN Q query syntax 
that you use to query your object model. Remember, LIN Q syntax is not invented just for the Entity 
Framework. M ostof theLINQ concepts that follow can also beused in theother LINQ implemen- 
tations, such asLINQ to Objects and LIN Q toADO.NET. 

Standard Query Operators 

LINO supports a large number of query operators — keywords that enable you to select, order, or 
filter data that is to be returned from the query. Although all of the examples in this chapter are dis- 
cussed in the context of EF, you can easily apply them to theother LINO implementations as well. 
In thefollowing section you get an overview of the most important standard query operators, each 
followed by an example. Each of the examples uses the object model and the objectcontext object 
called rayEntities you Created earlier as the data source to query against. 
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Select 

The Select keyword (select in C#) isused to retrieve objects from tiie source you are querying. In 
tiiis exampieyou see iiow to seiect an object of an existing type. Later in tliis ciiapter you see iiow to 
define new object siiapes on tiiefiy. 

VB.NET 

Dim allReviews = From r In myEntities . Reviews 
Select r 

C# 

var allReviews = from r in myEntities . Reviews 
select r; 

Tlie r variable in this example is referred to as a range variable that is only available within the cur- 
rent query. You typically introduce the range variable in the From clause, and then use it again in the 
Where and Select clausesto filter the data, and to indicate the data you want to select. Although 
you can choose any name you lil<e, you often see single-letter variables I il<e the r (for Review) or 
you seethe singular form of the collection you are querying (review instead of r in the preceding 
examples). 

From 

Although not considered a standard query operator — because it doesn't operate on the data but 
rather points to the data — the From clause (from in C#) is an important element in a LIN Q query, 
because it defines the collection or data source that the query must act upon. In the previous exam- 
ple, the From clause indicates that the query must be executed against the Reviews collection that is 
exposed by the myEntities object in EF. 

Order By 

With Order By (orderby in C#, without the space that V B.N ET uses) you can sort the items in 

the result collection, order By is followed by an optional Ascending or Descending (ascending 

and descending in C #) l<eyword to specify sort order. You can specify multiple criteria by separat- 
ing them with a comma. The following query returns a list of genres, first sorted by sortorder in 
descending order, then sorted on their Name in ascending order (the default); 

VB.NET 

Dim allGenres = From g In myEntities .Genres 

Order By g.SortOrder Descending, g.Name 
Select g 

C# 


var allGenres 


= from g in myEntities . Genres 

orderby g.SortOrder descending, g.Name 
select g; 
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Where 

Just like the WHERE clause in SQL, thewhere clause in LIN Q (where in C#) enables you to filter the 
objects returned by the query. The following query returns all authorized reviews: 

VB.NET 

Dim authorizedReviews = From r In myEntities . Reviews 

Where r. Authorized = True 
Select r 

C# 

var authorizedReviews = from r in myEntities . Reviews 

where r. Authorized == true 
select r; 

N otethat thewhere clause uses the language's standard equality operator: a single equals sign (=) in 
VB.N ET and two of them in C#. 

Sum, Min, Max, Average, and Count 

These aggregation operators enable you to perform mathematical calculations on theobjectsin the 
result set. For example, to retrieve the number of reviews, you can execute this query: 

VB.NET 

Dim numberOf Reviews = (From r In myEntities .Reviews 
Select r) . Count ( ) 

C# 

var numberOf Reviews = (from r in myEntities . Reviews 
select r).Count(); 

N otethat the count method is applied to the entire result set. Therefore, you need to wrap the entire 
statement in parentheses followed by a call to count. Without the parentheses you'll get an error. 
The numberOf Reviews variablein thisexamplewill beinferred as an integer and contains the num- 
ber of items in the Review table. 

Take, Skip, TakeWhile, and SkipWhile 

Take and Skip enable you to mal<e sub-selections within the result set. This is ideal for paging sce- 
narios where only the items for the current page are retrieved. Take gets the requested number of 
elements from the result set and then ignores the rest, whereas skip ignores the requested number of 
elements and then returns the rest. 

Within EF, the Take and skip operators are translated to SQL statements as well. This means that 
paging tal<es place at the database level, and not in the ASP. N ET page. This greatly enhances perfor- 
mance of the query, especially with large result sets, because not all elements have to be transferred 
from the database to the ASP.N ET page. 
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For Skip to work in LIN Q to Entities, you must add an order By clause (orderby in C#) to your 
query to sort the results before the designated number of rows aresl<ipped. Databases may return 
results in an unpredictable order if you don't add an explicit order by statement, so adding the 
Order By action in your LINQ to Entities query is needed to get a consistent result from the skip 
method because rows are sorted first before they are sl<ipped and tal<en. 

The following example shows you how to retrieve the second pageof rows, given a page size of 10: 

VB.NET 

Dim someReviews = (From r In myEntities . Reviews 
Order By r. Title 
Select r) .Skip (10) .Take (10) 

C# 

var someReviews = (from r in myEntities . Reviews 
orderby r. Title 
select r) .Skip (10) .Take (10) ; 

Just as with the count example, the query is wrapped in a pair of parentheses, followed by the calls 
to Skip and Take to get the requested rows. 

TheTakewhiie and skipwhiie query operators wo rl< in a similar fashion, but enableyou to takeor 
skip items while a specific condition is true. Unfortunately, they don't work in EF, but you can usu- 
ally work around that by adding a simplewhere clause to your query. 

Single and SingleOrDefault 

The Single and singieorDefauit Operators enableyou to return a single object as a strongly 
typed instance. This is useful if you know your query returns exactly one row; for example, when 
you retrieve it by its unique ID. The following example retrieves the review with an ID of 37 from 
the database: 

VB.NET 

Dim review37 = (From r In myEntities . Reviews 
Where r.Id = 37 
Select r) . Single ( ) 

C# 

var review37 = (from r in myEntities . Reviews 
where r.Id == 3 7 
select r). Single 0; 

The Single Operator raises an exception when the requested item is not found or if the query 
returns more than one instance. If you want the method to return nuii (Nothing in VB.N ET) — for 
example, for a Review Or Genre that is not found — or the default value for the relevant data type 

(such as a 0 for an integer. False for a Boolean, and so on) instead, use SlngleOrOefault. 

Even though there is only one Review with an id of 37 in the database, you will still get a collection 
of reviews (holding only one element) if you omit the call to single. By using single you force the 
result set into a single instance of the type you are querying. 
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First, FirstOrDefault, Last, and LastOrDefault 

These operators enable you to return the first or the last element In a specific sequence of objects. 
Just as with the Single method, First and Last throw an error when the collection Is empty, 
whereas the other two operators return the default value for the relevant data types. 

In contrast to single, the First, FirstOrDefault, Last, and LastOrDefault Operators don't 

throw an exception when thequery returns more than one Item. They simply return the first Item In 
the result set. 

The Last and Lastoroefauit querles are not supported In EF. However, you can easily accomplish 
the same behavior with First and a descending sort order. The following code snippet shows how 
to retrieve the oldest (the one with the lowest ID) and the most recent review from the database: 

VB.NET 

Dim flrstRevlew = (From r In myEntltles . Reviews 
Order By r.Id 
Select r) .First () 

Dim lastRevlew = (From r In myEntltles . Reviews 
Order By r.Id Descending 

Select r) .First () 

C# 

var flrstRevlew = {from r in myEntltles . Reviews 
orderby r.Id 
select r).Flrst(); 

var lastRevlew = (from r In myEntltles .Reviews 
orderby r.Id descending 

select r ). First 0; 

Simply by reordering the result set In reverse order before executing First, you actually get the last 
row In the sequence. N otethat In both cases, the type returned by thequery Is a true Review object, 
enabling you to access Its properties, such as id and Title, directly. 

Besides this LIN Q Query Syntax, LIN Q also supports method syntax. For the differences and an 

example, check out this M SDN article: http://tlnyurl.com/MethodVersusQuery. 

Shaping Data with Anonymous Types 

So far, the queries you have seen In the previous sections returned full types. That Is, the que- 
ries returned a list of Review Instances (such as the select method), a single Instance of Review 

(single. First, Or Last), Or a numeric value (such as count and Average). 

Q ulte often, however, you don't need all the Information from these objects. Figure 14-4 shows a 
Gridview with all the properties from the Review object. To Improve the presentation of this list, 
you usually want to skip properties like Body and Authorized, and Instead of the genre ID you 
probably want to display the genre name. Although you could tell thecridview to display only the 
columnsyou want to see. It would be more efficient If you wereableto limit the actual data. Thisis 
pretty easy to do with anonymous types, another language feature available In C#and VB.N ET. An 
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anonymous type is a type whose name and members you don't define up front as you do witli otiier 
types. Instead, you construct tlie anonymous type by seiecting data and tlien ietting tliecompiier 
infer tlie type for you. Tlie anonymous type can oniy be accessed witliin tlie metliod tliat dedared it, 
and as sucli you cannot return an anonymous type from a metliod. 

If you don't define tlie actuai type and give it a name, liow can you access tlie type and its proper- 
ties? Tliis is once again done witli type inference, wliere tlie compiler can see what data is assigned 
to a variable and then creates a new, anonymous type on the fly. 

Creating an anonymous type is easy; instead of selecting the actual object using something lil<e 
Select review, you usethenew keyword in C#and New with in Visual Basic, and then define the 
properties you want to select between a pair of curly braces: 

VB.NET 

Dim author izedReviews = From myReview In myEntities . Reviews 
Where myReview. Authorized = True 

Select New With {myReview. Id, myReview . Title , myReview. Genre .Name} 

C# 

var authorizedReviews = from review in myEntities . Reviews 

where review. Authorized == true 

select new { review. Id, review. Title, review. Genre .Name } ; 

Although the type is anonymous and cannot be accessed by name directly, the compiler is still able 
to infer the type, giving you full Intel I i Sense for the new properties that were selected in the query. 
Figure 14-5 shows how you access the properties of the anonymous type in the authorizedReviews 
variable, using the var l<eyword in C#. 


var authorizedReviews = from review in myEntities. Reviews 

where review. Authorized == true 

select new { review. Id, review. Title, 

review. Genre. Name ); 

foreach (var review in authorizedReviews) 

{ 

review^ 


^ 0 Equals 


0 GetHashCode 


© GetType 



int 'a. Id 


A Name 
>" Title 
0 ToString 

Anonymous Types; 
'a is new { int Id, string Title, string Name } 




FIGURE 14-5 


N ote that the preceding query accessed the actual Genre property of the Review. Besides its 
Genreid (defined as a column in the table Review in the database), the Review class also has a 
strongly typed Genre property, giving you direct access to the genre's properties, lil<e theName, as 
the previous query demonstrates. 

Besides directly selecting existing properties — as shown in the query that selected the id and Title 
of the Review and theName of the Genre — you Can also mal<e up property values and give them 
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different names as you go. For example, the following query creates a new anonymous type that 
renames the id as Number, limits the Title to the first 20 characters, and contains a boolean value 
that determines whether the item has been updated in the database previously: 


VB.NET 

Dim allReviews = From myReview In myEntities . Reviews 
Select New With 
{ 

.Number = myReview. Id, 

.Title = myReview. Title. Substring (0, 20), 
myReview . Genre . Name , 

.HasBeenUpdated = (myReview. UpdateDateTime > 
myReview. CreateDateTime) 

} 

C# 

var allReviews = from myReview in myEntities . Reviews 
select new 
{ 

Number = myReview. Id, 

Title = myReview.Title. Substring (0, 20), 
myReview . Genre . Name , 

HasBeenUpdated = (myReview. UpdateDateTime > 
myReview. CreateDateTime) 

}; 

N ote the difference between VB.N ET and C#; in theVB.N ET example, the names of the new prop- 
erties (Number, Title, and HasBeenUpdated) are prefixed With a period (.). C#doesn't have this 
requirement and lets you write new property names directly. If you don't introduce a new name (as 
is the case with the genre name in the preceding example), the name of the property you're selecting 
is used. This means that the genre name is stored in a property called Name. 

The ability to select extra properties that are not present in the original object gives you great flexi- 
bility in the data you display. This example determines whether the current review has been updated 
by comparing the CreateDateTime and UpdateDateTime properties. The result of this comparison 
(a boolean with thevaluexrue or False) isthen stored in the property HasBeenUpdated. You can 
select nearly anything you want, including the current date and time, complex calculations, sub- 
strings or combinations of properties, and so on. 

In the following exercise you see how to create a new anonymous type that has a Reviews collection 
as a property. You use this type to create a list of all the available genres in the database, and the 
reviews that each genre contains. 


||j|ym2^Q Working with Queries and Anonymous Types 

In this Try It 0 ut you create a page that lists all the available genres, each followed by the list of 
reviews that have been published in that genre. You use a Repeater control to display the list of genres 
and a nested BuiietedList to display the inner reviews. W hen you're done, you should see a list simi- 
lar to the one displayed in Figure 14-6. 
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1. Open the AiiByGenre.aspx page from the Reviews folder. M ake sure the page is in M arl<up View 
and then drag a Repeater from the Data category of theToolbox between the opening and closing 
tags of the cpMaincontent Content placeholder. 

2. Inside the Repeater create an <itemTempiate> element that in turn contains an <h3> element that 
contains a Literal. Y ou should end up with this code: 

<asp : Repeater ID="Repeaterl" runat= " server" > 
<ItemTemplate> 

<h3><asp : Literal ID= "Literall" runat= "server" ></asp : Literal ></h3> 
</ltemTemplate> 
</asp : Repeater> 

3. Set the Text property of the Literal control to <%# Evai ("Name") %>. Instead of double quotes, 
mal<e sure you use single quotes to delimit the property's value. You need this or otherwise the 
double quotes surrounding Name would prematurely close off the Text property. 

<asp:Literal ID="Literall" runat=" server" 

Text='<%# Eval ( "Name" ) %> ' ></asp : Literal> 

4. Below the <h3> element, drag and drop a BuiietedList control from the Standard category and 
set the following properties on the control. You can either enter them directly in M arl<up View or 
use the Properties Grid. 


PROPERTY NAME 

VALUE ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

ID 

ReviewList 

DataSource 

<%# Eval ("Reviews") %> (make sure you use single quotes again to 
wrap this attribute value, as shown in the following code snippet) 

DataTextField 

Title 

DisplayMode 

Text 


You should end up with the following control code: 

<asp : BuiietedList ID= "ReviewList" runat=" server" 

DataSource= ' <%# Eval ( "Reviews" )%> ' DataTextField="Title" 
DisplayMode="Text " >< /asp : BuiietedList > 

5. Switch to Design View and double-click the page somewhere in the read-only area defined by 
the master page to set up a handler for the Load event of the page. W ithin the handler, write 
the following code. Again, use Ctrl -I-. (Ctrl -I- Dot) to let VS insert the right namespace for the 

PlanetWroxEntities ClaSS. 
VB.NET 

Imports PlanetWroxModel 

... ' Class definition goes here 

Protected Sub Page_Load (sender As Object, e As EventArgs) Handles Me. Load 
Using myEntities As New PlanetWroxEntities () 

Dim allGenres = From genre In myEntities . Genres . Include ( "Reviews" ) 
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Order By genre. Name 

Select New With {genre. Name, genre. Reviews} 
Repeater l.DataSource = allGenres 
Repeater 1 . DataBind ( ) 
End Using 

End Sub 

C# 

using PlanetWroxModel ; 

... // Class definition goes here 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

using (PlanetWroxEntities myEntities = new PlanetWroxEntities () ) 
{ 

var allGenres = from genre in myEntities .Genres . Include ( "Reviews" ) 
orderby genre. Name 

select new { genre. Name, genre. Reviews }; 
Repeaterl.DataSource = allGenres; 
Repeaterl. DataBind 0 ; 

} 

} 

6. Save the changes to your page and then request it in the browser. You should see a result similar to 
that shown in Figure 14-6, where each genre appears as a group header above the lists with reviews. 


I i j Reviews Grouped by Genre 


^ 9 localhoit49676/Reviews/AIIByGenre.a5| 


C 41- Google 


Home > Reviews > By Genre 

Alternative Rock 

• Love Hate & Then There's you by The Von Bondies 
Disco 

Grunge 
Hard Rocic 

• Death Magnetic by Metallica 

• Travelling the Face of the Globe by 01 Va Voi - A genuinely fresh and enthralling sound 



FIGURE 14-6 


How It Works 


You have two important things to lool< at in this exercise. First of all, 
there's the LIN Q query that is used to get the genres and reviews from 
the database. This query (that uses include ("Reviews") to prevent 
lazy loading as you saw earlier) creates a new anonymous type with two 

properties: the Name of the Genre as a string and a collection of Review 

objects called Reviews. The class diagram for the new anonymous type 
could lool< like Figure 14-7. 


AnonymousType # 

Class 

B Properties 

A Name: string 

A Reviews : EntityCoilection<Review> 


FIGURE 14-7 
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These Name and Reviews properties are then used in the second important part: the Repeater control 
with the nested buiieted iist. First, tai<e a iooi< at the Repeater! 

<asp : Repeater ID="Repeaterl" runat= " server" > 
<ItemTemplate> 

<h3><asp : Literal ID="Literall" runat=" server" 

Text='<%# Eval{"Name") %> ' ></asp : Literal></h3> 
<!-- BulletedList here --> 
</ltemTemplate> 
</asp : Repeater> 

Although you haven't wori<ed with the Repeater control before, it may lool< familiar, because it worl<s 
in a manner similar to the other data controls. Within the <itemTempiate> you define the marl<up 
that you want repeated for each item in the data source. Using Evai you can get the value of the genre's 
Name property and assign it to the Literal, which is wrapped in a pair of <h3> tags. A similar con- 
struct is used for the BulletedLlst to feed it a DataSource: 

<asp: BulletedList ID="BulletedListl" runat= " server " DisplayMode="Text" 
DataSource='<%# Eval( "Reviews" )%> ' DataTextField= "Title" /> 

In addition to assigning simple properties lil<e the Text 
of the Literal from the Name of the underlying data 
item, you can also use Evai to get complex proper- 
ties. In this example, Evai ("Reviews" ) is used to get 
the collection of Reviews for the current Genre. The 
BulletedList control then understands how to handle 
this data source and retrieves the Title from each indi- 
vidual Review object and then displays that in the list. 
Thediagram in Figure 14-8 showsyou how each Genre 
contains one or more reviews, whose titles are displayed 
below the name of the genre. 

After you have set up the Repeater and defined the 
query, you need to start the data-binding process. You 
do this by assigning the results of the query to the 
DataSource property of the Repeater, followed by a 
call to DataBindO as shown in this C# example: 

Repeaterl .DataSource = allGenres; 
Repeaterl .DataBind ( ) ; 

These two lines set things in motion: as soon as you call oataBindO , the query is executed and the 
relevant genres and reviews are retrieved from the database. In this example, the genres are sorted on 
their Name, but obviously you can order on other properties, such as sortorder, as well. The Repeater 
then loops through each item in the result set (this item is the anonymous type you just saw) and 
uses that item's Name to fill in the <h3> element with the genre name. The Repeater then assigns the 
Reviews Collection to the inner BulletedList control's oatasource property. This control loops over 
the available Review instances, using their Title to build up the buiieted list. In this example, you see 
that genres without reviews are displayed in the list as well. In the "Exercises" section at the end of the 
chapter, you'll find an exercise that showsyou how to hide empty genres. 


Name I from AnonyrrK>usType<0),Name| 
Review Title (fromArH)nynx)bsType(0)Reviews(0)Tille) 
Review Title I from AnonymousTypefO ) Reviews( 1 ) Title) 
Review Title (fromAr<onymousType(0),Reviews(2)Trlte) 
Review Title (fromArwnymousTypelO.ReviewsOj.Title) 

Name I from AnonymousType< 1 ).Name) 
Review Title I from ArKxiyrTX)usType(l ), Reviews(0),Tille) 
Review Title I from AnonymousType(l ),Reviews( 1 )Trtfe) 

Name I from AnonyrroLJsType<2) Name) 
Review Title I from Anonyrr>ousType(2).Reviews(0).Title) 
Review Title from Anony[TiousType(2), Reviewst 1 ), Trtte) 
Review Title (fromAnonymousType(2)-R»il8ws(2)Tilte) 

FIGURE 14-8 
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Although it may take you some time to fuiiy understand the principles behind these LIN Q queries 
and the Entity Frameworl<, I am sure you are beginning to appreciate their power and accessibility. 
With just a few lines of code and a few controls, you can create powerful data presentation pages. 

H owever, it's possible to create LIN Q queries that execute against EF and use them with the ASP 
.N ET Server Controls with even fewer lines of code. You see how this worl<s in the next section, 

which deals with the EntityDataSource, the ListView, and the DataPager COntrolS. 

USING SERVER CONTROLS WITH LINQ QUERIES 

So far you have seen oneway to bind the results of a LIN Q query against EF to a control in your 
ASPX page: assign thedata to the control's Datasource property and then call oataBind. This way 
of getting data into the controls has a few shortcomings. First of all, this method does not support 
the editing, updating, and deleting of data directly. Secondly, because you define the data sourcein 
the Code Behind, thecridview doesn't l<now what data you're feeding it until run time, so you get 
no tool support to set up its columns. These shortcomings are easy to overcome by using the server 
controls, including the Listview and the EntityDataSource control. 

Using Data Controls with the Entity Framework 

in the previous chapter you were introduced to some of thedata controls, I il<e thecridview and the 
sqiDatasource. ButASP.N ET 4.5 shipswith more controls that let you create data-driven pages 
with very few lines of code. Two of these controls provide a visual interfaceinyourASP.NET pages, 
and the third one worl<s as a bridge between your data-bound controls and your underlying data 
sources. The following table briefly introduces you to these controls. 


CONTROL 

DESCRIPTION 

EntityDataSource 

As with the SqlDataSource that you saw in previous chapters, the 
EntityDataSource worl<s as a bridge between your data-bound controls 
and the underlying data source: EF in this case. 

ListView 

The ListView control provides a template-driven visual interface that 
enables you to display, insert, edit, and delete items in a database, provid- 
ing full CRUD services. 

DataPager 

The DataPager is used together with the Listview and enables you to 
paginate the data in the data source, feeding data to users in bite-sized 
chunl<s instead of all rows at once. 


The next few sections provide you with more detail about these controls and show you how to use 
them in a few Try It Out exercises. 

Introducing the EntityDataSource Control 

As its name implies, the EntityDataSource is a close relative of the sqiDatasource and other 
data source controls. The EntityDataSource control is to EF what the sqiDatasource control 
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is to SQL-based data sources: It provides a dedarative way to access your modei. Just iii<e tlie 
sqiDatasource controi, EntityDatasource gives you easy access to tlie C RU D operations and 


additionaiiy mai<es sorting and fiitering of data very easy. Tliefoiiowing tabie describes tlie main 
properties and capabilities of this control. 

PROPERTY 

DESCRIPTION 

EnableDelete 
Enablelnsert 
EnableUpdate 

Determine whether the control provides automatic insert, update, and 
delete capabilities. W/hen enabled, you can use the control together with 
data-bound controls like the Gridview or Listview to support data 
management. 

Context TypeName 

The name of the ob j ectcontext class that the control should use. In 
the examples in this book, this type name is PlanetwroxEntities. 

EntitySetName 

The name of the entity set from the EF model you want to use, such as 
Reviews. 

Select 

OrderBy 

Where 

Enable you to define the query that the EntityDatasource control fires 
against the model. Each of these properties maps to one of the query 
operators you've seen before. 


Together with a data-bound control, the EntityDatasource provides you full access to the under- 
lying SQL Server database through LINQ to Entities. The next exercise shows you how to use the 
control inyourASPX pages. 

^^^^^^Q A Simple EntityDataSource Application 

In this Try It Qut you start building the Gig Pics feature of Planet Wrox, a section of the website where 
users can upload photos they created during concerts of their favorite bands. You see how to let a user 
create a new photo album that acts as a container for the pictures that are uploaded. You see how to 
use the EntityDatasource and a Detaiisview to Create a user interface that enables users to enter 
a name for a new photo album into the system. In later exercises you see how to add pictures to this 
photo album. 

1. Add the following two tables to your database using SQL Server M anagement Studio. Refer to 
Chapter 12 for more details about creating tables, primary l<eys, and identity columns. 


PhotoAlbum 


COLUMN NAME DATATYPE DESCRIPTION 


Id 

int 

The unique ID (identity and primary key) of the photo album 

Name 

nvarchar(IOO) 

The name of the photo album 
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Picture 


COLUMN NAME 

DATA TYPE 

DESCRIPTION 

Id 

Int 

The unique ID (Identity and primary key) of the picture 

Description 

nvarchar{300) 

A description of the picture 

ToolTip 

nvarchar(50) 

A tooltip displayed when you hover over a picture 

ImageUrl 

nvarchar(200) 

The virtual path to the picture on disk 

PhotoAlbumId 

int 

The ID of the photo album this picture belongs to 


For both tables, make sure that none of the columns in the two tables are nullable by uncheck- 
ing their Allow N ulls check boxes. M ake the id column the primary key by clicking it once, and 
then clicking the yellow key icon on theTable Designer toolbar. Additionally, makethiscolumn 
the table's Identity column by setting the (Is Identity) property on the Column Properties G rid to 
Yes. Refer to Chapter 12 if you're not sure how to do this. Finally, make sure you have the casing 
of the table and column names right. Later code in this book assumes you wrote the table and col- 
umn names as shown here. 

2. On the Object Explorer, open the database diagram that you created in Chapter 12. Right-click the 
diagram and chooseAdd Table. Select the two new tables, click Add, and then click Close. Arrange 
the two new tables side by side if necessary. N ext, drag the id column from the photoAibum 
table onto the photoAibumid column of the picture table. Confirm that the Primary Key Table 
is PhotoAibum With Id as the Selected column and that picture is the Foreign Key Table with 
PhotoAlbumId as the selected column, as shown in Figure 14-9. 


Tables and Columns 


Relationship name; 


IFK Picture PhotoAlbum^^H 




^rimaiy key table: 

Foreign key table; 

PhotoAibum 

V Picture 


Id 

PhotoAlbumId 


FIGURE 14-9 


OK 
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3. Click OK twice to apply the changes and then save and close the diagram. Click Yes to confirm the 
changes made to the two tables. 

4. N ext, switch back to VS, and open the ADO .N ET Entity Framework M odel file pianetwrox 
.edmx from the App_code folder by double-clicking it. Right-click an empty spot of the diagram 
and choose Update M odel from Database. In the wizard that appears, expand Tables, then dbo, 
and then check the two tables you just created: photoAibum and picture. Click Finish to have the 
two tables added to your model. Your diagram should end up like Figure 14-10. N ote that I reor- 
ganized the diagram by dragging the tables side by side to make it easier to see them. 


Picture 

i 

<^ PhotoAlium ^ 

S Properties 


'-1 Properties 

vf Id 

A Description 


* 1 

Id 

> Name 

A Too [Tip 

A ImageUH 

A PhotoAlbumId 



Q Navigation Properties 



Pictures 

D Navigation Properties 


PhotoAibum 




^ Navigation Properties 
yl] Reviews 


Review 


^ Properties 

yi Id 


> Title 


^ Summary 


> Body 


A Genreld 


A Authorized 


A CreateDateTime 

> UpdateDateTime 

^ Navigation Properties 

Genre 


FIGURE 14-10 


If you're using a non-English version of VS, you need to pluralize the names of the entity sets and 
properties again. To do this, click the picture class, open its Properties Grid by pressing F4, and 
change the Entity Set N amefrom picture to pictures. Repeat this for the PhotoAibum class and 
change its Entity Set N ame to photoAibums. Finally, click the picture property on the diagram 
for the PhotoAibum class, press F2 to rename the item, and then enter pictures as the new name. 

Save all your changes and close the diagram. 

5. Create a new Web Form based on your custom template in the root of the site and call it 

NewPhotoAlbum.aspx. Give the page a title of Create New Photo Album. 

6. Switch the page into Design View and from the Data category of theToolbox, drag a De tailsView 
control and drop it into the cpMaincontent placeholder. On theDetaiisview control's Smart 
Tasks panel, open the Choose Data Source drop-down list and select <N ew data source>. In the 
Data Source Configuration Wizard dialog box, click the Entity icon and click OK. In the Named 

Connection drop-down, choose PlanetWroxEntities. 


NOTE If you get an error about incorrect metadata, close the dialog box, delete 
the existing EntityDataSource control from the page, and manually drag a new 
one from the Toolbox. On the Detaiisview control's Smart Tasks panel, choose 
the new data source control. Then open the EntityDataSource control's Smart 
Tasks panel and choose Configure Data Source. 
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Click N ext to go to the Configure Data Seiection screen, siiown in Figure 14-11. From tlie 
EntitySetN ame drop-down iist, ciioose photoAibums. 



Configure Data Source - EntityDataSourcel 
Configure Data Selection 


Entity SetName; 


PhotoAlbumj 


EntityTypeFilter: 


(None) 


Choose the properties in the query result; 


0 Select AlKEntity Value) 

□ Id 

□ Name 


I I Enable automatic inserts 
I I Enable automatic updates 
□ Enable automatic deletes 


FIGURE 14-11 


7. For tiiis exercise, you need insert beliavior, so clieci< off tlie EnableAutomatic Inserts checl< box. 
Clicl< Finish to close the Configure Data Source wizard. 

8. If you don't see the id and Name columns in the Detaiisview, but a general Databound coio 
instead, clicl< the Refresh Schema linl< on the control's Smart Tasl<s panel. 

Enable inserting for the Detaiisview control by checl<ing the Enable Inserting item on the same 
Smart Tasl<s panel. 

9. Open the Detaiisview control's Properties Grid and change the DefauitMode from Readonly to 

Insert. 

10. Switch to M arl<up View, locate the BoundPieid for the id property of the photoAibum, and set 
its insertvisibie property to false SO you don't get a text box for the ID when inserting a new 
photo album. 

<asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" 
SortExpression="Id" InsertVisible="false" /> 

11. Select the EntityDatasource control in Design View, open its Properties Grid, and switch to the 
Events tab. Double-clicl< the inserted event, visible in Figure 14-12. 
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12. Atthetop of the code file, add the following 
Imports/using Statement to bring your entities model in 
scope so you can access classes such as photoAibum; 

VB.NET 

Imports PlanetWroxModel 
C# 

using PlanetWroxModel; 

Then, in the event handler that VS added for you, write the following code that redirects the user 
to a new page once the photo album has been inserted in the database: 

VB.NET 

Protected Sub EntityDataSourcel_Inserted (sender As Object, 

e As EntityDataSourceStatusEventArgs) Handles EntityDataSourcel . Inserted 
If (e. Entity IsNot Nothing) Then 

Dim myPhotoAlbum As PhotoAibum = CType (e . Entity , PhotoAibum) 
Response. Redirect (String. Format ( "ManagePhotoAlbum. aspx?PhotoAlbumId={o} " , 
myPhotoAlbum. Id. ToStringO ) ) 

End If 

End Sub 

C# 

protected void EntityDataSourcel_Inserted (obj ect sender, 
EntityDataSourceChangedEventArgs e) 

{ 

if (e. Entity != null) 
{ 

PhotoAibum myPhotoAlbum = (PhotoAibum) e . Entity; 

Response. Redirect (string. Format ( "ManagePhotoAlbum. aspx?PhotoAlbumId={o} " , 
myPhotoAlbum. Id. ToString 0 ) ) ; 

} 

} 

13. Save all changes and then request NewPhotoAibum.aspx in the browser. 


COMMON MISTAKES If the page you get is empty, make sure you set the 
DefaultMode property of the DetailsView to Insert. 


Enter a new namefor the photo album, such as Fog Fighters playing live at Lowlands 

2 012, and clicl< the Insert I inl<. You'll get a Resource N ot Found error (because you haven't cre- 
ated ManagePhotoAlbum. aspx yet), but you Can at least see the ID of the new photo album in the 
address bar of your browser: 

http : //localhost : 9797/ManagePhotoAlbum. aspx?PhotoAlbumId=l 


EntityDataSourcel System.Web.UI.WebControls.Entit) ■ 

Us* ■PlE y 

Deleting 

Inserting ^ 
Inserted 

Event raised after the Insert operation is completed. 


FIGURE 14-12 


Using Server Controls with LINQ Queries | 523 


How It Works 

You started this exercise by adding tlie picture and photoAibum tables to botli tlie database and the 
EF diagram. Tliese tables are used to store data about photo albums and the pictures they contain. 
Each individual picture belongs to a photoAibum referred to by its photoAibumid that points to the id 
column of the PhotoAibum table in the database. The picture table is designed to only hold data about 
the picture; the actual picture file is stored on disl<, as you seelater. 

To enable users to create a new photo album, you added a oe tailsView control to the page. To 
make sure the control can be used to insert new photo albums, you enabled inserting and then set the 
DefauitMode to Insert. T his forces the control to jump into insert mode, instead of the default read-only 
mode. You then hool<ed up an EntityDatasource to theoetaiisview, which tal<es care of inserting the 
photo album in the PhotoAibum table. The code for the EntityDatasource control looks I ike this: 

<asp : EntityDatasource ID="EntityDataSourcel" runat="server" 

ConnectionString="name=PlanetWroxEntities" EnableFlattening= "False" 
Def aultContainerName= "PlanetWroxEntities " EnableInsert="True" 
EntitySetName="PhotoAlbums " OnInserted="EntityDataSourcel_Inserted" > 

</asp : EntityDataSource> 

The Connect ionstring attribute points to a named connection string in web.config that is used to 
access the database. ThesnabieFiattening attribute is used in advanced scenarios when using a ver- 
sion of EF before .N ET 4. For .N ET 4 and 4.5 you should leave it set to False. If you are using Visual 
Basic. N ET, your code won't have the omnserted attribute set. 

N ote how straightforward the EntityDatasource is in this scenario: You point it to a 
DefauitcontainerName, the PlanetWroxEntities in this example, which is the main entrance for the 
control to get its data. You also turned on inserting by setting Enabieinsert to True. Additionally, 
you set the EntitySetName, SO thecontrol knows what object to use from the EF diagram. For simple 
inserts, this is all you need to do. W hen the page loads in the browser, theoe tailsView renders a user 
interface that enables you to enter a new name for the photo album. W hen you click Insert, the data 
you entered is assembled and forwarded to the EntityDatasource. This control in turn creates a new 
PhotoAibum instance and then saves it in the database by sending the appropriate insert SQ L state- 
ment to the database. 

In many situations, this standard behavior is not enough. You may need to validate the data that is 
entered or you may have a need to change the actual data before it gets sent to the database. You see an 
example of the latter in a subsequent Try It 0 ut when you upload images to the server. 

Another common requirement is retrieving the ID of the newly created item, which is then sent to the 
next page. This exercise used the following code to accomplish that: 

VB.NET 

Dim myPhotoAlbum As PhotoAibum = CType (e . Entity, PhotoAibum) 
Response . Redirect (String. Format { "ManagePhotoAlbum. aspx?PhotoAlbumId= { 0 } " , 
myPhotoAlbum . Id . ToString ( ) ) ) 

C# 

PhotoAibum myPhotoAlbum = (PhotoAibum) e . Entity ; 

Response . Redirect (string. Format { "ManagePhotoAlbum. aspx?PhotoAlbumId={ 0 } " , 
myPhotoAlbum. Id. ToString 0 ) ) ; 
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The cool thing about theEntityDatasource control is that it worl<s with strongly typed objects, where 
the type maps to the tables you added to the model diagram. In thiscase, you areworl<ing with real 
instances of photoAibum, the class that represents the photo albumsin thesystem. This enables you to 
retrievethe photo album you have inserted in the database in the inserted event of the data source 
control. The e argument exposes a property called Entity that contains a reference to the new photo 
album. Simply by casting it to a real photoAibum (by using CType in VB.N ET or putting the class name 
in parentheses before it in C#), you can access the properties of the PhotoAibum, including its new 
ID that has been generated by the database (through the Identity settings on the ID column) and then 
stored in the id property of the PhotoAibum. The final line in the event handler takes the user to the 
next page and sends the ID of the new photo album in the query string. This code has been wrapped in 
an if statement that checks if e. Entity is not nuii / Nothing. If an error occurs while updating the 
database, the Entity property will be null, and the cast to a PhotoAibum will fail. The error you see 
in the browser will then be about the failed cast, and not about the database error, making it hard to 
seethe root cause of the problem. By using the if check, you cast and redirect only when the database 
update succeeded, whereas you see the database error in case it failed. 

N otethat you get an error when you leave the name field empty and click Insert. The previous chapter 
showed you how to modify the DetailsView to insert validation controls to its templates. 


N ow that you can insert new photo albums, the next logical step is to add pictures to the photo 
album. In the next exercise you see how to create a user interface with the Listview control that 
enables a user to upload new pictures in the photo album. 

Introducing the ListView Control 

Up until now, you have seen a few data-bound controls at work. You saw thecridview, which is 
quite powerful because it supports updates, deletes, sorting, and paging of data, but lacks inserting 
and generates a lot of H TM L markup. You also saw the Repeater control that gives you precise 
control over the generated HTM L, but lacks most advanced features that the other data controls 
have, such as updateand delete behavior and sorting and filtering capabilities. And finally, you saw 
the DetailsView that enables you to insert or update one row at a time. 

The Listview is a "best of all worlds" control, combining the rich feature set of thecridview 
with the control over the markup that the Repeater gives you and adding the insert behavior of the 
DetailsView. The ListView enables you to display data in a variety of formats, including a grid 
(rows and columns like the Gridview), as a bulleted list (similar to how you set up the Repeater 
earlier in this chapter), and in Flow format, where all the items are placed in the HTM L after each 
other, leaving it up to you to write some CSS to format the data. 

The Listview displays and manages its data through templates that enable you to control many of 
the different views that the Listview gives you on its underlying data. T he following table describes 
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all the available templates that you can add as direct children of theListview control In the markup 
of the page. 


TEMPLATE 

DESCRIPTION 

<LayoutTemplate> 

Serves as a container. It enables you to define a loca- 
tinn whpre the inrllvirliial datpj items are niared The 

LI \J II VV 1 1 ^ 1 ^ LI 1 ^ IIIL.J|V|^.JL.IC]I ^.JCILCI 1 L^ 1 1 1 0 □ 1 ^ IJ 1 Q V' vJVJ . Ill ^ 

data items, presented tlirough the itemTemplate and 
AlternatingitemTemplate, are then added as children of 
this container. 

<ItemTemplate> 
<AlternatingItemTemplate> 

Define the read-only mode for the control. When used 
together, they enable you to create a "zebra effect," where 
odd and even rows have a different appearance {usually a 
different background color). 

<SelectedItemTemplate> 

Enables you to define the look and feel of the currently 
active, or selected, item. 

< Insert I temTemplate> 
<EditItemTemplate> 

These two temnlates enable vnu tn define the user interface 

1 1 1 ^ L V V \J 1 1 1 1 □ L^ O 1 1 Q 1 ^ y \J L.I t.\J ^ 1 II 1 ^ LI 1 I.J O ^ 1 III L^ 1 1 O 

for inserting and updating items in the list. You typically 
place controls like text boxes, drop-down lists, and other 
server controls in these templates and bind them to the 
underlying data source. 

<ItemSeparatorTemplate> 

Defines the markup that is placed between the items in the 
list. Useful if you want to add a line, an image, or any other 
markup between the items. 

<EmptyDataTemplate> 

Displayed when the control has no data to display. You can 
add text or other markup and controls to it to tell your users 
there's no data to display. 

<GroupTeraplate> 

<GroupSeparatorTemplate> 

<EmptyItemTemplate> 

Used in advanced presentation scenarios where data can 
be presented in different groups. 


Although this long list of templates seems to suggest you need to write a lot of code to work with the 
Listview, this Is not always the case. First of all, VS creates most of the code for you based on the 
data that Is exposed by controls such as theEntityDatasource. Secondly, you don't always need all 
templates, enabling you to minimize the code for the control. 

Besides the numerous templates, the control has the following properties that you typically set to 
Influence Its behavior. 
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PROPERTY 

DESCRIPTION 

ItemPlaceholderlD 

The ID of a server-side control placed within the LayoutTemplate. 
The control referred to by this property is replaced by all the repeated 
data items when the control is displayed on-screen. It can be a true 
server control like an <asp : PlaceHolder> or a simple HTML element 
with a valid ID and its runat attribute set to server {for example, <ul 
runat="server" id="MainList"></ul>). If you don't set this property, 
ASP.NET tries to find a control with an ID of itemPlaceholder and uses 
that control instead. 

DataSourcelD 

The ID of a data source control on the page, such as an 
EntityDataSource or a SqlDataSource control. 


The enumeration for this property contains three values — None, 
Firstitem, and Lastitem — to determine the position of the 
insertitemTemplate: either at the beginning or end of the list, or not 
visible at all. 


Just I ike the other data-bound controls, theListview has a number of events that fire at specific 
moments during the control's lifetime. For example, it has iteminserting and iteminserted 
events that fire right before and after an item has been inserted in the underlying data source. 
Similarly, it has events that trigger right before and after you update or delete data. You see more 
about handling these l<inds of events in the next chapter. 

Besides the templates, properties, and events you just saw, theListview has more to offer. For a 
detailed explanation of the Listview control and all of its members and behavior, checl< out the 
M SDN documentation at http://bit.iy/dCAooK. 

The next exercise shows you how to put all of this information together. You see how to define 
the various templates and set the relevant properties to control the lool< and feel of the Listview 
control. 


|UyHj{2^Q Inserting and Deleting Data with the ListView Control 

Inserting items with theListview can be just as easy as with the oetaiisview: You point the control 
to a data source and let VS create the necessary templates for you. However, in many real-world web- 
sites, these default templates won't cut it. You may want to display fewer fields than are available in the 
data source, validate data before it gets sent to the database, or store data at a different location than 
the database. For example, you may want to store uploaded images on disl< rather than in the database 
and then store only a reference to the file in the database table. The next exercise shows you how to cus- 
tomize the Listview templates and handle the inserting event of the EntityDataSource when you 
build functionality to add pictures to your photo albums. 

This exercise has you worl< with a lot of code that is generated automatically by VS. M ost of what you 
need to do in this exercise is remove code instead of add new code. If you get lost somewhere, or you 
feel your code does not look like it should, remember this chapter comes with the full source code that 
you can download from the Wrox website, so you can compare your code with mine. 
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1. In the root of the website, create a new Web Form based on your custom template. Call it 

ManagePhotoAlbum.aspx, Set itS Title tO Manage Photo Album, and SWitch it into Design View. 

2. From the Data category of theToolbox, drag a Listview control onto the page in the cpMaincon- 
tent placeholder and then hool< it up to an Entityoatasource control by choosing <N ew data 
source>in the Choose Data Source drop-down list on the Smart Tasl<s panel (just as you did with 
the Detaiisview earlier). Clicl< theEntity icon, clicl< OK, choose pianetwroxEntities as the 
named connection, and clicl< N ext. 

In the Configure Data Selection dialog box of the EntityDatasource control's wizard, visible in 
Figure 14-11, choose pictures from the EntitySetN ame drop-down list. 

3. C hecl< the first and the last check box of the three at the bottom of the screen to give the 
EntityDatasource insert and delete support. Finally, clicl< Finish to close the Configure Data 
Source wizard. 

4. Back in Design View, select the EntityDatasource control, open its Properties Grid, locate the 
Where property, and open its Expression Editor by clicking the ellipsis for that property. You may 
recall that the ManagePhotoAlbum.aspx page receives the photo album ID through the query 
string, so you'll need to set up a Querystringparameter in this step to filter the Listview to those 
pictures belonging to the designated photo album. To do this, enter it.photoAibum.id 

= ©PhotoAlbumld in the Where Expression box at the top of the dialog box. Then click Add 
Parameter, enter photoAibumid as the name, choose Q ueryString from the Parameter Source drop- 
down, and enter photoAibumid as the QueryStringField. Next, click the Show Advanced Properties 
link and change the Type property of the parameter to Int32. Your dialog box should now look 
likeFigure 14-13. When you'redone, click OK to dismiss the dialog box. 


Expression Editor 

I I Automatically generate the Where expression based on the provided parameters. 
Where Expression; 


ItPhotoAlbum.ld = ©photoAibumid 


Parameter source: 


Name 


Value 


PhotoAlbumld RequestQueryStnngC'PhotoAlbumld") 


QueryString 


Properties: 


Add Parameter 



Name 

PhotoAlbumld 



QueryStringField 

PhotoAlbumld 



Size 

0 



Type 

Int32 



Validatelnput 

True 


Type 

The type of the paran 

leter. 


Hide advanced properties 


FIGURE 14-13 
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5. Back in the page, the Listview should still appear as a plain rectangle, shown in Figure 14-14, 
because you haven't provided any template information yet. 


ManagePhotoAlbum.aspx* -0 X ^^^^^^^^^^^ 


MasEerPages/Frontend . master 

Login 

SiteMapDataSource - SiteMapDataSourcel j 


m 

Root Node > Parent Node > Current Node 

cpMainContent (Cusfnm) ) 

ListView - ListViewl 

Ensure your data source has updated schema by 

choosing the Refresh Schema task, if available. 

The ItemTemplate and LayoutTemplate are required. 

>} 

EntityDataSource - EntityDataSourcel 

<l l> 


1 0 Design | o Split ["Source I <ajp:Content#Content2>| <asp:EntityDataSource#Ent...> |>| 


FIGURE 14-14 


6. On the Smart Tasks panel of the Listview, choose Configure ListView. (If you don't see this link, 
click Refresh Schema first and reopen the Smart Tasks panel.) A dialog box appears that enables 
you to choose the layout of the control, a style, and whether or not you want to enable operations 
such as inserting and updating. Choose Bulleted List as the layout, and check the Enable Inserting 
and Enable Deleting items so your dialog box ends up as shown in Figure 14-15. 


Select a Layout; 


Grid 
Tiled 

Flow 

Single Row 


Select a Style: 


Colorful 
Professional 

Blues 


Options: 

□ Enr.bl? Editing 
0 Enable Inserting 
Enable Deleting 
Q Enable Paging 


n Enable Dynamic Data 


Configure ListView 


Id: Databound 

Descr?)tion: Databound 
TooIT?): Databound 
ImageUrl: Databound 
PhotoAIbumId; Databound 
PhotoAJbum; Databound 
Delete I 


Id: Databoxmd 
Descr^jtion: Databound 
TooU^j: Databound 
ImageUrl: Databound 
PhotoAIbumId: Databound 
PhotoAlbum Databound 
Delete I 


Id: Databound 
Descr^Jtion: Databound 
TooIT^): Databound 


I 


FIGURE 14-15 
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7. Click OK to close the dialog box. If you get a dialog box that asks if you want to regenerate the 
Listview control, click Y es. 

8. Switch to M arkup View and remove the code for the following templates. To make this as easy as 
possible, click the relevant opening tag once, then click the tag in theTag Selector at the bottom of 
the Document Window to select the entire element and its content, and then press the Delete key. 
Alternatively, you can collapse the tag using the plus (+) symbol in the left margin, select the whole 
line, and delete it at once. 

<AlternatingItemTemplate> 

<EditItemTemplate> 
^ <EmptyDataTemplate> 
^ <ItemSeparatorTemplate> 
^ <SelectedItemTemplate> 

Theonly three remaining template elements should now be insertitemTempiate, itemTempiate, 

and LayoutTemplate. 

9. Locate the <ui> element in the LayoutTemplate and remove its id, runat, and style attributes. 
Then add a class attribute and set it to itemcontainer. You can also remove the empty <div> 
element that VS added for you below the <ui>. Y our <LayoutTempiate> now contains this code; 

<LayoutTemplate> 

<ul class="ItemContainer"> 

<li runat=" server" id="itemPlaceholder" /> 

</ul> 
</LayoutTemplate> 

10. Locate the itemTempiate and remove the lines that make up the id, photoAibumid, and 
photoAibum columns, bolded in the following code snippet, because you don't need them. M ake 
sure you don't accidentally delete the opening <ii> tag: 

<li style=""> 
Id: 

<asp:Label ID="IdLabel" runat="server" Text='<%# EvalC'Id") %>' /> 
<br /> 

Description: 

<asp: Label ID="DescriptionLabel" runat=" server" 
Text='<%# Eval { "Description" ) %>' /> 

<br / > 
ToolTip: 

<asp:Label ID="ToolTipLabel" runat=" server" Text='<%# Eval { "ToolTip" ) %>' /xbr /> 
ImageUrl : 

<asp: Label ID="ImageUrlLabel" runat=" server" 

Text='<%# Eval {" ImageUrl " ) %>' /xbr /> 
PhotoAibumid: 

<asp:Label ID="PhotoAlbumIdI,abel" runat="server" 
Text='<%# EvaK "PhotoAibumid") %>• /> 

<br /> 
PhotoAibum: 

<asp:Label 10= "PhotoAlbumLabel " runat=" server" Text='<%# Eval ("PhotoAibum") %>' /> 


530 I CHAPTER 14 LINQ AND THE ADO.NET ENTITY FRAMEWORK 


<br /> 

<asp:Button ID="DeleteButton" runat = "server" CotnmantiName= "Delete" Text="Delete" /> 
</li> 

11. Repeat the previous step for the insertitemTempiate that is also part of theListview control's 
mari<up. 

Compare your code with the foi lowing code and make any changes if necessary. Checl< if your 
Listview has a DataKeyNaraes property set to Id and add it if it isn't there. Sometimes VS doesn't 
add this property, although the code requires it to be there. Also check that the templates contain 
the correct controls. The order of the templates or the white space can be different in your code. 

<asp : Listview ID="ListViewl" runat=" server" DataKeyNames="Id" 

DataSourceID="EntityDataSourcel" Insert I temPosition=" Last Item" > 
< Insert I temTemplate> 
<li style=""> 
Description : 

<asp:TextBox ID="DescriptionTextBox" runat=" server" 

Text='<%# Bind {"Description") %>' /xbr /> 

ToolTip: 

<asp:TextBox ID="ToolTipTextBox" runat=" server" 

Text='<%# Bind {"ToolTip") %>' /xbr /> 

ImageUrl : 

<asp:TextBox ID= " ImageUrlTextBox" runat= " server " 

Text='<%# Bind ("ImageUrl") %>' /xbr /> 
<asp:Button ID="InsertButton" runat="server " 

CommandName=" Insert" Text=" Insert" /> 
<asp:Button ID="CancelButton" runat="server" 

CommandName=" Cancel" Text="Clear" /> 

</li> 

</ Insert I temTemplate> 
<ItemTemplate> 

<li style=" ">Description: 

<asp:Label ID="DescriptionLabel" runat=" server" 

Text='<%# Eval ( "Description" ) %>' /xbr /> 

ToolTip : 

<asp:Label ID="ToolTipLabel" runat=" server" 

Text='<%# Eval ( "ToolTip" ) %>' /xbr /> 

ImageUrl : 

<asp:Label ID="ImageUrlLabel" runat="server" 

Text='<%# Eval ("ImageUrl") %>' /xbr /> 
<asp:Button ID="DeleteButton" runat="server" 

CommandName=" Delete" Text="Delete" /> 

</li> 
</ltemTemplate> 
<LayoutTemplate> 

<ul class="ItemContainer"> 

<li ID="itemPlaceholder" runat="server" /> 
</ul> 
</LayoutTemplate> 
</asp : ListView> 

12. Switch back to Design View, select the Entityoatasource control, and open its Properties Grid. 
Switch to the Events tab and double-click the inserting event. At the top of the page add an 


Using Server Controls with LINQ Queries | 531 


Imports or a using Statement for the pianetwroxModei namespace, as you did in tlie otiier pages 
in tliis cliapter. T lien in tlie event liandier tliat VS added for you, write tine foiiowing code: 

VB.NET 

Protected Sub EntityDataSourcel_Inserting (sender As Object, 

e As EntityDataSourceChangingEventArgs) Handles EntityDataSourcel . Inserting 
Dim photoAlbumld As Integer = 

Convert. ToInt32 (Request .QueryString. Get ( "PhotoAlbumld") ) 
Dim myPicture As Picture = CType (e .Entity, Picture) 
myPicture. PhotoAlbumld = photoAlbumld 
End Sub 

C# 

protected void EntityDataSourcel_Inserting (object sender, 
EntityDataSourceChangingEventArgs e) 

{ 

int photoAlbumld = Convert. ToInt32 (Request. QueryString. Get ("PhotoAlbumld") ) ; 
Picture myPicture = (Picture) e. Entity; 
myPicture. PhotoAlbumld = photoAlbumld; 

} 

13. Add tlie following CSS code to Monochrome, ess in the M onochrome theme's folder and save the 
file: 

. ItemContainer 
{ 

width: 600px; 
list-style-type: none; 
clear: both; 

} 

.ItemContainer li 
{ 

height: 300px; 
width: 2 00px; 
float: left; 

} 

.ItemContainer li img 
{ 

width: laOpx; 

margin: lOpx 20px lOpx 0; 

} 

14. Add the same codeto Darkcrey.css in the Darl<Grey theme's folder, but this time set the width of 

the ItemContainer ClaSS tO 400pX lil<e this: 

. ItemContainer 
{ 

width: 400px; 

list-style-type: none; 
clear: both; 

} 
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15. Save all your changes, close all open files, and then request NewPhotoAibum.aspx In your browser. 
M akesureyou don't accidentally open ManagePhotoAibum.aspx, because it requires a query 
string that is sent by NewPhotoAibum.aspx. Enter a new name for the photo album and clicl< 
Insert. You're taken to ManagePhotoAibum.aspx where you can enter new pictures. For now, all 
you can do is enter the description of the picture, the tooltip, and a fake URL of the image (just 
enter some text); you see later how to modify this and let a user upload real pictures to the website. 
Once you click the Insert button, a new item appears in the list, next to the insert controls. Add a 
few more items and you'll notice that the insert controls move to a row below the others, as shown 
in Figure 14-16, which shows the page in Firefox. 


^^-ro^-'^'-*^ 1 _ 1 g 1 ,x J 

■ ; Manage Photo Album 




^ <J() localho!t49209/ManagePhotoAlbum.a!p>;?PhotoAlbumld=4 


C 41- Soogit 


Description: Dave Grolil on the Description: IVIore Dave Grohl on Description: Dave Grohl on guitar 

main stage the main stage ToolTip: Dave Grohl on guitar 

ToolTip: Dave Grohl on the main ToolTip: IVIore Dave Grohl on the ImageUrl: Fake URL 

stage main stage 

ImageUrl: Fake URL ImageUrl: Fake URL 


Description: Taylor Havtfkins on Description: 
drums I 
ToolTip: Taylor Hav^kjns on drums 
ImageUrl: Fake URL 


ToolTip: 


ImageUrl: 



FIGURE 14-16 


16. Click the Delete button for an item and see how the item is removed from the list automatically. 

17. If you're currently viewing the site in the M onochrome theme, use the drop-down list to switch to 
DarkGrey. Notice that this theme shows only two images per row instead of the three displayed by 
the M onochrome theme shown in Figure 14-16. 

How It Works 

You started this exercise by attaching an EntityDataSource control to theListview control. The 
EntityDatasource is Configured to work with the Pictures entity set. As you saw earlier, each picture 
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is linked to a plioto album by its photoAibumid. To have the ManagePhotoAibum.aspx page display 
only those pictures that belong to the current photo album (identified by the photoAibumid query 

string), you set up a WhereParameter: 

<asp : EntityDataSource ID="EntityDataSourcel" runat=" server" 
ConnectionString="name=PlanetWroxEntities" 

Def aultContainerName="PlanetWroxEntities" EnableDelete= "True" 
EnableFlattening= "False " Enablelnsert= " True " Ent itySetName= " Pictures " 
Where="it . PhotoAlbum. Id = ©photoAibumid" 
OnInserting="EntityDataSourcel_Inserting" > 
<WhereParameters> 

<asp : QueryStringParameter Name= " PhotoAibumid" 

QueryStringField=" PhotoAibumid" Type="Int32" /> 
</WhereParameters> 
</asp : EntityDataSource> 

You should take note of two important parts in this markup. First, there's the whereParameters collec- 
tion that contains a Querystringparameter that looks at the PhotoAibumid field in the query string. 
W hen the EntityDataSource is about to get its data, it retrieves the value for the parameter from the 
query string. 

The second important part isthe where attribute of the EntityDataSource control. It USesa where 

clause to limit the items that are returned from the database; 


Where=" it. PhotoAlbum. Id = ©photoAibumid" 


This gets all the pictures from the picture tablethat have the requested PhotoAibumid. The it in 
the Where clause is an implicit range variable, just like other range variables in queries you've seen 
before. H owever, here you need to use it and cannot make up your own name as you can do with your 
own LINQ queries. At run time, the where clause is filled in with the actual PhotoAibumid, retrieved 
from the query string, which ensures only pictures belonging to the current album are returned. 

The first time the page loads after you create a new photo album, there won't be any pictures. H owever, 
as soon as you start adding items using the msertxempiate of theListview control, you'll see them 
appear in the list. 

To display the pictures on the page, you used the Listview control. Just like other data-bound con- 
trols, the Listview is able to display repetitive data in a structured way. In this example, you set the 
Listview to bulleted list mode, so the control presents its data as a set of <ii> elements. You define the 
container of the items with the <LayoutTempiate>: 

< Layout Temp 1 at e > 

<ul class="ItemContainer"> 

<li ID="itemPlaceholder" runat= " server " /> 

</ul> 
</LayoutTemplate> 

N ote that this <ii> has its id set to itempiacehoider. This tells theListview control whereto add 
the individual pictures. At run time, this element will be replaced by the actual itemsfrom thetem- 

plates, like <ItemTemplate>. 
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W hen the Listview control needs to display its data, it creates an item based on the <itemTempiate> 
for each data item in the data source. In this example, each data item is a strongly typed picture 
object, which provides access to properties such as TooiTip and Description: 

<ItemTetnplate> 
<li> 

ToolTip: 

<asp:Label ID="ToolTipLabel" runat=" server" Text='<%# Eval ( "ToolTip" ) %>' /> 

<asp:Button ID="DeleteButton" runat=" server" CommandName="Delete" /> 
</li> 
</ItemTemplate> 

W ith this code in place, each item in the data source is presented as a series of labels that display rel- 
evant properties of the picture. Evai (propertyName) is used to retrieve the requested value from the 
object, which is then displayed as the Label control's text. N otethat at this stage, the <itemTempiate> 
only displays data about the picture. You see how to upload and display real pictures later. 

N Ote the CommandName Of the Button COntrol in the ItemTemplate. It's Set tO Delete, Which tums this but- 
ton into a true Delete button. W hen you clicl< it, the Listview figures out what picture you clicl<ed the but- 
ton for and then instructs the EntityDataSource control to delete the associated picture from the database. 

The code you added to the theme's CSS files displays the items in an organized way. By setting the 
class attribute of the <ui> control to itemcontainer, the following CSS is applied to that list: 

. ItemContainer 
{ 

width: 600px; 
list-style-type: none; 
clear: both; 

} 

The first property sets the entire width of the list to 600 pixels and the second declaration removes the 
bullet from the items in the list. Each item in the list is then displayed within a <ii> element, to which 
the following CSS is applied: 

.ItemContainer li 
{ 

height: 3 00px; 
width: 200px; 
float: left; 

} 

Each item gets a forced width of 200 pixels. The float property tells the <ii> elements to float next 
to each other. Within the parent area of 600 pixels you can fit three <ii> elements of 200 pixels each, 
causing the fourth and further elements to be placed on their own line. This is a great alternative to pre- 
senting data with HTML tables, which generally needs a lot more markup to achieve the same effect. 

Finally, each image within the <ii> element gets a forced width of 180 pixels and 10 pixels of margin at the 
top and bottom, 20 pixels on the right (to create some room between the images), and none at the left side: 

.ItemContainer li img 
{ 
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width: laOpx; 

margin: lOpx 20px lOpx 0; 

} 

In the DarkGrey theme, the width of the itemcontainer is set to only 400 pixels. This way, the <div> 
is just wide enough to display two images side by side. 

In contrast to many of the other data-bound controls, the Listview also supports inserting by defining 
an insertitemTempiate that Contains one or more controls that are bound to properties in the under- 
lying object. For example, the Description property of the picture is bound lil<e this: 

< Insert I temTemplate> 
<li> 

Description : 

<asp:TextBox ID="DescriptionTextBox" runat=" server" 

Text='<%# Bind {"Description") %>' /xbr /> 

</ Insert I temTemplate> 

Instead of Eval (PropertyName) , this COde USeS Bind (PropertyName) tO Set Up a tWO-Way binding 

mechanism. This ensures that the ASP.N ET run time is ableto figure out the relationship between 
the Description property of a picture and the text box called DescriptionTextBox, even after a 
postback. So when you enter some details and click the special Insert button (with its commandName 
set to Insert), a new picture object is constructed, its properties, such as Description, Title, and 
TooiTip, are filled with the values from the associated server controls in the insertitemTempiate, and 
then the Picture instance is forwarded to theEntityDatasource control, which takes care of saving 
the item in the database and refreshing the list of pictures that are displayed on the page. 

Once theEntityDatasource control is about to save the picture, it fires its inserting event. In 
that event handler in this exercise you added some code that linked the new picture instance to the 

photoAibumid likethis: 

VB.NET 

Dim photoAibumid As Integer = 

Convert .ToInt3 2 (Request .QueryString .Get ( "PhotoAibumid" ) ) 
Dim myPicture As Picture = CType (e . Entity, Picture) 
myPicture. PhotoAibumid = photoAibumid 

C# 

int photoAibumid = Convert . ToInt32 (Request . QueryString . Get { "PhotoAibumid" )) ; 
Picture myPicture = (Picture) e . Entity; 
myPicture. PhotoAibumid = photoAibumid; 

The Include Foreign Key Columns option you enabled earlier in this chapter has given you a 
PhotoAibumid property on the picture class that enables you to directly set the ID of the photoAibum 
(which you retrieved from the query string). This in turn relates the picture in the database to a specific 
photo album in the photoAibum table. If you hadn't enabled that option, the property wouldn't have 
been there, and you would have had to assign a PhotoAibum instance to the PhotoAibum property of 
the picture by querying the photo album from thedatabase based on its ID. Using the Foreign Key 
Columns option makes this process a lot easier because you can simply assign the ID of the album you 
want to add this picture to. 
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The code in the Listview uses Evai and Bind statements to get data in and out of the picture objects 
that you're assigning to thecontrois. ASP.N ET 4.5 introduces a new way to set up these bindings, as 
you see next. 


Using Strongly Typed Data-Bound Controls 

W hen VS created the code for the Listview for you, it added Bind and Evai statements lil<e this: 

<asp:TextBox ID="ToolTipTextBox" runat="server" Text='<%# BindC'ToolTip") %>' /> 
<asp:Label ID="ToolTipLabel" runat="server " Text='<%# EvalC'ToolTip") %>' /> 

As you learned in the "H ow It Worl<s" section of the preceding exercise. Bind is for two-way data 
binding (for insert and edit scenarios) and Evai is for read-only scenarios. N otice how the name of 
the property (TooiTip in this example) is a literal string placed between quotes. Using string literals 
makes your code more prone to errors. First of all, it'seasy to misspell the name. Becausea string 
cannot be checl<ed by VS at development time, you won't notice this error until you view the page in 
the browser. Secondly, if you rename a property, the change is not picl<ed up by the string literal. 

Fortunately, ASP.N ET 4.5 now has a solution to deal with this problem. The data-bound controls 

(such as the Listview, the Repeater, theCridView, the DetailsView, and the FormView) have 

been turned into strongly typed data-bound controls. They have been extended with an itemType 
property that you can point to the type of object you're assigning to its data source. In the preced- 
ing example, this type would have been pianetwroxModei .picture, the fully qualified name of the 
Picture class. 0 nce you've Set this property, the data-bound control gets two new properties, item 
and Binditem, that are of the type you assigned to the itemType property. The first one serves as a 
replacement for Evai and the second one replaces Bind. By setting the itemType property and using 
Item and Binditem, you get the fol low i ng benefits: 

>• IntelliSense now helps you find the correct property of the object you're working with, as 
shown in Figure 14-17. 


<asp: Label 10= "Description Label" 

runat="server" Text='<5f# Item. 

%>• /> 

T^^lT^ string Picture.Descriptron 

°° , , , No Metadata Documentation available. 
<asp:Label ID= ToolTipLabel run^ ... — * 

<br /> 
ImageUrl : 

<asp: Label ID="ImageUrlLabel" runat="server" Text=*<%# Item.Ima 
<br /> 

<asp: Button ID="DeleteButton" runat="server" Coii¥nandName="DeIet 

> 

description 

B 


>• EntityKey 
> EntityState 
0 Equals 
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FIGURE 14-17 

>• When you now misspell the name of a property, or rename it later, you get an error in the 
Error List, giving you the chance to fix the problem before the page is viewed in the browser. 

>• External tools (available for the full versions of Visual Studio) will correctly rename the item 
in the markup when you rename a property on your object. 
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Although this is an excellent new feature that will help you write better code, you can only use 
this solution when worl<ing with a strongly typed object such as picture from an EF model, or 
from other classes you or third-party developers create. It won't work in situations such as the 
following: 

>• W hen using the sqiDatasource control. This control uses an object under the hood 
that doesn't expose strongly typed properties that map to columns (such as tooitIp or 
Description), and as such you cannot access these columns or properties through the item 
and Binditem properties. 

>- When using anonymous objects. Because the anonymous object doesn't have a name, you 
cannot assign its name to the itemType property. 

In thefollowing short exercise, you see how to mal<e use of this new strongly typed data-binding 
capability. 


UjlUmSJ^] Using Strongly Typed Data-Bound Controls 

In this exercise you modify the Listview control in ManagePhotoAibum.aspx by mal<ing it strongly 
typed. You see how to set the itemType property and how to replace Bind and Evai with their strongly 
typed counterparts. W hen you're done, the page will work exactly as before, but will now be easier to 
maintain in the future. 

1. Start by opening ManagePhotoAibum.aspx in M arkup View in VS. 

2. Locate the opening tag of the Listview and add an itemType property with its value set to 
pianetwroxModei .Picture. N otice how IntelliSense helpsyou find the correct item by showing a 
list with all the types that can be used as the itemiype, as shown in Figure 14-18. 



InsertItemPosition="LastIteiii" ItemType="|"> 


Lj|Calculator | 

□ NameService 

□ PianetWroxModel. Genre 

□ PianetWroxModel. PhotoAlbum 

□ PianetWroxModel. Picture 

□ PianetWroxModel, PlanetWroxEntities 

□ PlanetWroxModel.Review 


FIGURE 14-18 


3. Inside the msertitemxempiate template of the Listview, locate the Bind statement for the 

Description TextBox, and Change it from Bind { "Description" ) tO Binditem. Description. 

Y ou should end up with this code: 

<asp:TextBox ID="DescriptionTextBox" runat=" server" 
Text='<%# Binditem. Description %>' /> 

4. Repeat the previous step for the looiTip TextBox. The imageuri gets special treatment later in 
this chapter, so there's no point in changing it now. 
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5. I nside the itemTempiate template of the li stview, locate the Evai statement for the 

Description Label and Change it from Eval ( "Description" ) tO Item. Description. Y OU 

should end up with this code: 

<asp: Label ID="DescriptionLabel" runat=" server" 
Text='<%# Item.Description%> ' /> 

6. Repeat step 5 for the tooitIp Label. Again, the imageuri gets special treatment later in this 
chapter, so there's no point in changing it now. 

7. Save your changes and request NewPhotoAibum.aspx in the browser. Insert a new album and then 
add a few pictures by entering a description and tooltip and uploading an image file. N otice how 
the code still behaves as before. 

How It Works 

You didn't have to change a lot to make the Listview strongly typed and get access to IntelliSenseand 
compile-time checl<ing of your code. All you had to do was add an itemType property to theListview 
and replace the calls to Bind and Evai with their Binditem and item counterparts. With these changes 
in place, the control behaves exactly as before. At run time, the control lool<s at the value of the 
assigned properties and displays them in the browser. W hen you submit data bacl< to the server, the 
reverse takes place: The values you entered in the controls are assigned to the properties of an instance 
of the Picture object, which is then saved in the database by the Entity Framework. It's recommended 
to use the strongly typed binding capabilities whenever you can, because they'll helpyou spot errors 
much sooner and make it easier to type your code. 


Right now, users need to type in a U RL for an image manually. Obviously, this isn't very user 
friendly. It would be much easier for them if they could pick an image from their local computer and 
upload it to the server. You see how to accomplish this in the next exercise. 

^^^^^^Q Customizing Templates of the ListView Control ] 

The default templates for theListview control that VS generates based on the information from the 
EntityDatasource are enough Only i n the most trivial situations. Usually, you need much more con- 
trol. For example, in the itemiempiate you may want to display an actual image control instead of the 
plain imageuri property as text. Likewise, in the msertitemiempiate you may want to display a file 
upload control instead of a simple text box. In this exercise, you see how to change the standard tem- 
plates so you can incorporate both features. Additionally, you see how to handle the inserting event 
of the EntityDatasource control to save the uploaded file to disk, and update the database with the 
URL of the image. 

For this example to work, the account used by the web server (the account you use to log on to your 
machine if you are using IIS Express) needs read and write permissions to thecigpics folder that you 
create in this exercise. The account should already have these permissions on your machine, but if you 
run into problems with this exercise, refer to the section "Understanding Security in IIS" in Chapter 19. 

1. Create a new folder in the root of the website called cigpics. This folder will contain concert pic- 
tures uploaded by users. 


Using Server Controls with LINQ Queries | 539 


2. Open theManagePhotoAibum.aspx page in M arkup View and locate tlie <itemTempiate> ele- 
ment. Remove the Label that displays the imageuri and replace it with an image control, with its 

ImageUrl set tO the ImageUrl Of the picture ObjeCt. 

<asp: Image ID="ImageUrl" runat="server" ImageUrl= ' <%# Item. ImageUrl %>' /> 

Remove the text imageuri : that appears right above the image. 

3. To enable users to upload images, you need to replace the TextBox for the imageuri property 
with a Fiieupioad control. You also need to remove the text imageuri: again. You do this in the 

Insert I temTemplate! 

<asp:TextBox ID="ToolTipTextBox" runat= " server " 

Text='<%# Bindltem.ToolTip %>' /xbr /> 
<asp:FileDpload ID="FileUploadl" runat= " server " /> 

<br /> 

<asp:Button ID="InsertButton" runat="server" CommandName=" Insert" Text="Insert" /> 

N otethat you don't need to bind the property to the control here. Because the uploaded image 
needs special treatment, you'll write some code in the Code Behind of the page instead of relying 
on the built-in data-binding capabilities. 

4. Set the CausesValidatlon property of the Cancel button in the <InsertItemTemplate> to 
false: 

<asp:Button ID="CancelButton" runat="server" CommandName=" Cancel" Text="Clear" 
CausesValidation=" false" /> 

5. Similarly, set the causesvaiidation property of the Delete button in the <itemTempiate> to 

false. 

6. Switch to the Code Behind of the page (press F7) and then extend the inserting event handler 
with the following code, which saves the file to disl< and then updates the imageuri property of the 
Picture instance With its new location: 

VB.NET 

myPicture . PhotoAlbumId = photoAlbumId 

Dim FileUploadl As FileUpload = 

CType (ListViewl. Insertltem.FindControl ("FileUploadl") , FileUpload) 
Dim virtualFolder As String = "-/GigPics/" 

Dim physicalFolder As String = Server. MapPath(virtualFolder) 
Dim fileName As String = Guid.NewGuid {) .ToString () 

Dim extension As String = System. IO.Path.GetExtension(FileUploadl. FileName) 

FileUploadl . SaveAs (System. 10. Path. Combine (physicalFolder, fileName + extension)) 
myPicture. ImageUrl = virtualFolder + fileName + extension 

C# 

myPicture . PhotoAlbumId = photoAlbumId; 

FileUpload FileUploadl = 

(FileUpload) ListViewl . Insertltem. FindControl ( "FileUploadl" ) ; 
string virtualFolder = "-/GigPics/"; 
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string physicalFolder = Server.MapPath(virtualFolder) ; 
string fileName = Guid.NewGuid ( ) .ToString () ; 

string extension = System. 10. Path. GetExtension (FileUploadl . FileName) , • 

FileUploadl . SaveAs (System. 10. Path. Combine (physicalFolder , fileName + extension)); 
myPicture . ImageUrl = virtualFolder + fileName + extension; 

7. Go back to M arkup View and add three validation controls to the insertitemTempiate: two 
RequiredFieidvaiidator controls hooked up to the text boxes for the Description and 

ToolTip, and one CustomValidator with its ErrorMessage set to Select a valid .jpg file. 
Give the RequiredFieidvaiidator COntrolS an ID SUCh aS reqDesc and reqToolTip and aSSign 

the CustomValidator an ID of cusvaiimage. Finally, Set the TextMode property of the text box 
for the Description to MultiLine and enter a line break (a <br />) before the Insert button. 

You should end up with the following code: 

Description: 

<asp: RequiredFieidvaiidator ID=" reqDesc" ControlToValidate="DescriptionTextBox" 
runat=" server" ErrorMessage= "Enter a description." /> 

<asp:TextBox ID="DescriptionTextBox" runat=" server" TextMode="MultiLine" 

Text='<%# Bindltetn. Description %>' / xbr /> 
ToolTip: 

<asp: RequiredFieidvaiidator ID=" reqToolTip" ControlToValidate="ToolTipTextBox" 
runat="server" ErrorMessage= "Enter a tool tip." /> 

<asp:TextBox ID= "ToolTipTextBox" runat= " server " 

Text='<%# Bindltem. ToolTip %>' /xbr /> 
<asp : FileUpload ID=" FileUploadl" runat=" server" /xbr /> 
<asp: CustomValidator ID="cusValImage" runat="server" 

ErrorMessage="Select a valid .jpg file." /> 

<br /> 

<asp: Button ID="InsertButton" runat=" server" CommandName=" Insert" Text=" Insert" /> 

8. Select the Listview control in Design View and set up an event handler for its iteminserting 
event by double-clicking the event in the Events tab of the Properties Grid. Complete the event han- 
dler with the following code: 

VB.NET 

Protected Sub ListViewl_ItemInserting (sender As Object, 

e As ListViewInsertEventArgs) Handles ListViewl . Iteminserting 
Dim FileUploadl As FileUpload = 

CType (ListViewl. Insertltem.FindControl ("FileUploadl") , FileUpload) 
If Not FileUploadl. HasFile OrElse 

Not FileUploadl. FileName. ToLower 0 .EndsWith(" .jpg") Then 
Dim cusVallmage As CustomValidator = 

CType (ListViewl . Insertltem. FindControl ( "cusVallmage" ) , CustomValidator) 
cusVallmage. I sVal id = False 
e. Cancel = True 
End If 
End Sub 

C# 

protected void ListViewl_ItemInserting (object sender, ListViewInsertEventArgs e) 
{ 

FileUpload FileUploadl = 
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(FileUpload) ListViewl . Insertltem.FindControl ( "FileDploadl" ) ; 
if ( IFileUploadl.HasFile |[ ! FileUploadl .FileName.ToLower () .EndsWith (" . jpg" ) ) 
{ 

CustomValidator cusVallmage = 

(CustomValidator) ListViewl . Insertltem. FindControl ( "cusVallmage" ) ; 
cusVallmage . IsValid = false; 
e. Cancel = true; 

} 

} 

9. Save all your changes, and then request NewPhotoAibum.aspx in your browser (don't acciden- 
tally request the ManagePhotoAibum.aspx page that you just worked on). Enter a new name for 
the photo album and click the Insert link. Insert a few pictures by entering a description and a 
tooltip, selecting a .jpg picture from your hard drive, and clicking thelnsert button. Then enter 
the description and tooltip of another image, but leave the file upload box empty. When you click 
Insert, you get an error message indicating that you didn't upload a valid .jpg file, as shown in 
Figure 14-19. 
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Select a valid .jpg file. 









FIGURE 14-19 


10. Click the Browse button of the file upload box, browse for a valid .jpg file, and click the Insert 
button once more. The file now gets uploaded successfully. 

How It Works 

You haven't changed much in the actual process of inserting the picture into the database. 
TheListview control still collects all the relevant data from the page and then sends it to the 
EntityDatasource control, which then inserts the item in the picture table in the database through 
EF. W hat is different is the way you set up the templates and the way you handled the events of the 
EntityDatasource and Listview controls. Look at the templates first. Inside the itemTempiate you 
added an <asp: image> to take the place of the plain text label. As you can see in Figure 14-19, this dis- 
plays the actual image, rather than just its UR L. 

To enable a user to upload the images, you replaced the TextBox control in the insertitemTempiate 
with a FileUpload control. Additionally, you added a few validation controls to force the user to enter 
the required fields. Assoon as you click thelnsert button, the page posts back and the Listview con- 
trol fires its iteminserting event. This event is a good place to perform any custom validation. 0 neof 
the arguments this event handler receives (the e argument) is of the type ListviewinsertEventArgs, 
a class that provides context-sensitive information to the iteminserting event. W hen you detect an 
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error, you can set the cancel property of thise argument to True (true in C#) to tell theListview 
control you want to cancel the insert operation. Inside this event handler you added some code that 
"finds" the upload control in the msertitem template. Because you can potentially have multiple 
controls with the same name (for example, a Fiieupioad control in the insertitemTempiate and 
one in the EdititemTempiate), you Cannot access Fiieupioadi directly. Instead, you need to use 
Findcontroi on the insertitem object to Search for the control: 

VB.NET 

Dim FileUploadl As FileUpload = 

CType (ListViewl . Insertitem . FindControl ( "FileUploadl" ) , FileUpload) 

C# 

FileUpload FileUploadl = 

(FileUpload) ListViewl . Insertitem. FindControl ( "FileUploadl" ) ; 

When you have a reference to the Fiieupioad control, you can check itSHasFiie property to see if a 
file has been uploaded. Additionally, you can checl< Fiieupioadi.FiieName.ToLower o .Endswith(" . 
jpg" ) to see if a file with a . jpg extension has been uploaded. To ensure that this test is carried out 
only when the user has uploaded a file, the code uses orEise in VB and | | in C#to short-circuit the 
logic in the if statement, as explained in Chapter 5. 

If the user doesn't upload a valid file, the code in the if block runs. It uses Findcontroi again to 
find the customvaiidator control and sets its isvaiid property to False (false in C#). This tells 
the control to display its ErrorMessage property when the page renders. Finally, to stop theListview 
from continuing the insert operation you need to set the cancel property of the e argument to True 
(true in C#): 

VB.NET 

e. Cancel = True 
C# 

e. Cancel = true; 

The other validation controls to make sure a title and description are entered work in the same way as 
you saw in Chapter 9. 

If the user uploaded a valid .jpg file, theListview continues with its insert operation, which eventu- 
ally results in an insert action against the EntityDatasource control. W hen that control is about to 
send the insert operation to EF, it fires its inserting event, giving you a last chance to hook into the 
process and look at thedata. Inside this event handler, you used similar codeto find a reference to the 
FileUpload control insidethe Insertitem template. You then used the following codeto determine 
the physical and virtual folder for the file, its name, and its extension: 

VB.NET 

Dim virtualFolder As String = "-/GigPics/" 

Dim physicalFolder As String = Server .MapPath (virtualFolder) 
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Dim fileName As String = Guid.NewGuid ( ) . ToString { ) 

Dim extension As String = System. 10 . Path. GetExtension (FileUploadl . FileName) 
C# 

string virtualFolder = " -/GigPics/ " ; 

string physicalFolder = Server .MapPath (virtualFolder) ; 
string fileName = Guid.NewGuid (). ToString () ; 

string extension = System. 10 . Path. GetExtension (FileUploadl . FileName) , • 

The variable virtualFolder holds the virtual location— starting off the root of thewebsite— of the 
folder where the uploaded images are stored. Using server .Mappath you can turn this into a physical 
folder. Assuming you have your project in its default location of c: \BegASPNET\site, the physical- 
Folder variable now contains C:\BegASPNET\Site\GigPics. 

N ext, a new, random filename is generated using Guid.NewGuid o . TheGuid class is able to gener- 
ate more or less random filenames that are guaranteed to be unique across time and space. This code 
assigns the variable fileName something lil<e f 6d8ed05-2dbe-4aed-868a-de045f 9462e3, which guar- 
antees a unique filename. Finally, the extension of the file is retrieved using the static GetExtension 
method of the Path class in the system. lo namespace. 

At this stage, you have all the required information to store the file on disl<, and then update the data- 
base. Storing thefile on disl< is easy using the saveAs method of the Fiieupioad control: 

VB.NET 

FileUploadl . SaveAs (System. 10 . Path. Combine (physicalFolder , fileName + extension)) 
C# 

FileUploadl . SaveAs (System. 10 . Path. Combine (physicalFolder , fileName + extension)); 

This code tal<es the physical folder, the filename, and the extension and passes them to the 
Combine method of the Path class that builds up the full path. This path is then sent to the 
SaveAs method, which saves the file at the requested location. 

Finally, the picture instance is updated with the new imageuri: 

VB.NET 

myPicture . ImageUrl = virtualFolder + fileName + extension 
C# 

myPicture . ImageUrl = virtualFolder + fileName + extension; 
This assigns something lil<e ~/GigPics/f 6d8ed05-2dbe-4aed-8 68a-de04 5f 94 62e3 . jpg tO the 

ImageUrl property, which is the new virtual location of the uploaded image. Right after you insert the 
new image, the Listview is updated and now shows the new image, using the image control with its 
ImageUrl Set to the image you just uploaded. 


You can imagine that if you upload a large number of images for a single photo album, the page 
becomes more difficult to manage. This is especially true at the front end, where users may be 
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accessing your site over a slow networl< connection. Instead of presenting tliem aii tlie images in tlie 
plioto aibum on a singiepage, you can spiit up tlie piioto aibum into muitipie pages, enabling users 
to go from page to page. You see how to do tiiis in tlie next section, wiiicii discusses tlie DataPager 
control. 

Introducing the DataPager Control 

TheDataPager is a Separate control that you can use to extend another, data-bound, control. 
Currently, the .N ET Framework lets you usetheoataPager only to provide paging capabilities to 
theListview control, but the developer community has been active writing implementations for 
other controls, lil<etheGridview, as well. 

You can hook up theoataPager to theListview control in two ways: You can either define it 
within the <LayoutTempiate> of the Listview control or you can define it entirely outside the 
Listview. In thefirst case, theoataPager knowsto what control it should provide paging capabili- 
ties automatically. In the latter case, you need to set the pagedcontroiio property of theoataPager 
to the ID of a valid Listview control. You see how to configure and use theoataPager in conjunc- 
tion with a Listview next. Being able to define theoataPager outside of the Listview control is 
useful if you want to place it at a different location of the page, such as in the Footer or sidebar 
area, for example. 

^^^^^^Q Paging Data with the ListView and DataPager Controls 

In this Try It Out you create the front-end page of the Gig Pics feature. Users of your site can choose 
one of the available photo albums from a drop-down list and then view all the available pictures in a 
pageable list that is created by a Listview and a oatapager control. Figure 14-22 shows the final result 
of this exercise. 

1. In the root of your site, create a new folder called photoAibums. Inside this folder create a new 
Web Form based on your custom page template and call it oefauit .aspx. Set the Title of the 

page to All Photo Albums. 

2. Switch to Design View and drop a oropoownList control on the page. On the control's Smart 
Tasks panel, enable AutoPostBack and then hook it up to a new Entityoatasource control by 
clicking Choose Data Source, and then choosing <N ew data source>from thefirst drop-down list. 
Click the Entity icon, click OK, and select pianetwroxEntities in the Named Connection drop- 
down list. Click Next. On the Configure Data Selection dialog box, choose PhotoAibums from the 
EntitySetN ame drop-down list and select the fields id and Name, as shown in Figure 14-20. 

3. Click Finish to close the Configure Data Source wizard. In the Choose a Data Source dialog box, 
select Name from the Data Field to Display drop-down list and leave id selected in the Data Field 
for the Value drop-down list. If you don't seethe items in the lists, click Refresh Schema first. 

4. Click OK to close the Data Source Configuration Wizard. 

5. Below the oropoownList add a new Listview control and connect it to a new Entityoatasource 
by selecting <Mew data source>from the drop-down list on the control's Smart Tasks panel. Click 
the Entity icon and click OK. Select pianetwroxEntities in the drop-down and click Next. In the 
dialog box that follows, choose Pictures from the EntitySetN ame drop-down list and click Finish. 
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Configure Data Source - EntityDataSourcel Li_^^H 
Configure Data Selection I 


EntitySetName; 
|photQAIbumi 

EntitylypeFilter: 


(None) 


Choose the properties in the query result; 



O Enable automatic inserts 

□ Enable automatic updates 

□ Enable automatic deletes 


j < Previous 





£ini$h 


FIGURE 14-20 


6. Select the new EntityDatasource control (called EntityDatasource2) in Design View, open 
its Properties Grid, and click the button with the ellipsis for the where property to open up the 
Expression Editor. Check off the check box for an automatically generated Where clause at the 
top of the dialog box. Click the Add Parameter button and enter photoAibumid as the name for 
the parameter. Then choose Control in the Parameter Source drop-down property and choose 
DropDownListi as the C ontrol I D . Finally, click the Show Advanced Properties link and change the 
Type of the parameter to int32. Your Expression Editor should look like Figure 14-21. 

Click OK to close the dialog box. 

7. On the Listview control's Smart Tasks panel, click Configure ListV lew (click Refresh Schema and 
reopen the Smart Tasks panel first if you don't see that option). Select Bulleted List as the layout, 
and in the Options area choose Enable Paging. The drop-down list below it should default to N ext/ 
Previous Pager, which is fine for this exercise. 

8. Click OK and VS creates a couple of templates for you. 

9. Switch to M arkup View and add an itemType attribute to the Listview with its value set to 

PlanetWroxModel. Picture. Your Listview ShOUld end Up like this: 

<asp : Listview ID="ListViewl" runat=" server" DataKeyNames="Id" 

DataSourceID="EntityDataSource2 " I temType=" PlanetWroxModel . Picture" > 
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Expression Editor 

0 Automatically generate the Where expression based on the provided parameters. 
Where Expression: 


Parameter source; 


Name Value 

PhotoAlbumId OropDownListI .SelectedValue 


Control 


I # I Properties: 


Add Parameter 



ControllD 

DropDownListI 



ConvertEmpty 

True 



DbType 

Object 



DefaultValue 




Direction 

Input 



Name 

PhotoAlbumId 



PropertyName 

SelectedValue 



Size 

0 


Type 

Int32 


Type 


Thet/pe of the parameter. 


Hide advanced properties 


OK 


Cancel 


FIGURE 14-21 


10. Next, remove the following templates and the code they contain: 


> 

> 
> 


<AlternatingItemTemplate> 
<EditItemTemplate> 
< Insert I temTeraplate> 
<ItemSeparatorTemplate> 
^ <SelectedItemTemplate> 

11. Remove the ID, runat, and style attributes from the <ui> in theLayoutTempiate and add a 

class attribute and set it to ItemContainer. Locate the DataPager inside the LayoutTemplate 

and add a pagesize attribute set to 3. Finally, add clear: both; to the empty style attribute: 

<LayoutTemplate> 

<ul class=" ItemContainer" > 

<li id="itetnPlaceholder" runat=" server" /> 
</ul> 

<div style="clear: both;"> 

<asp: DataPager ID="DataPagerl" runat="server" PageSize="3"> 

<Fields> 

<asp : Next Previous PagerField ButtonType="Button" ShowFirstPageButton="True" 
ShowLastPageButton="True" /> 
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</Fields> 
</asp : DataPager> 
</div> 
</LayoutTemplate> 

12. M odify the code in the itemTempiate so it ends up lil<e this: 

<ItemTemplate> 
<li> 

<asp: Image ID="Imagel" runat= "server" ImageUrl= ' <%# Item. ImageUrl %>' 

ToolTip='<%# Item.ToolTip %>' /> 
<asp:Label ID= "DescriptionLabel " runat="server" 

Text='<%# Item. Description %>' /> 

</li> 

</ltemTemplate> 

This creates an image control with its imageuri and TooiTip properties bound to the corre- 
sponding properties of the picture object that you're binding to. TheTooiTip appears when 
you hover your mouseover the image in the browser. Below the image, a simple Label control 
displays the Description of the image. You don't need the other properties that were initially 
defined in the template for this exercise. 

13. N ext, wrap the entire code in the cpMaincontent content block in an updatePanei with a 
contentTempiate element to avoid pageflicl<er when paging the list of pictures, or when choosing 
a new photo album from the list. 

<asp:Content ID="Content2" ContentPlaceHolderID="cpMalnContent" runat= " Server" > 
<asp: UpdatePanei ID="UpdatePanell" runat="server"> 
<ContentTemplate> 

<asp : DropDownLlst ID="DropDownLlstl" runat= " server " AutoPostBack="True" 

DataSourceID= " Ent ItyDataSourcel " DataTextFleld= "Name " DataValueFleld= " Id" > 

</ContentTemplate> 
</asp :UpdatePanel> 

</asp : Content > 

14. Open the Web. sitemap file for the site and add a main menu and two submenu items for the Gig 
Pics section, between the Reviews and About sections: 

< / s 1 1 eMapNode > 

<siteMapNode url="-/PhotoAlbiims/" title="Gig Pics" description="All Gig Pics"> 
<siteMapNode url="-/PhotoAlbums/Default.aspx" title="Gig Pics" 

description="All Gig Pics" /> 
<siteMapNode url="-/NewPhotoAlbum.aspx" title="New Album" 

description="Create a new Photo Album with Gig Pics" /> 
</siteMapNode> 

<slteMapNode url="~/About/Def ault . aspx" tltle= "About" 
descrlptlon= "About this slte"> 

15. Because you added another menu item, you need to change the width of each item in the menu 
for theM onochrome theme. To do this, open up Monochrome, ess and change the width for the 
.MalnMenu ul 11 selector from 200 to 160 pixels: 

.MalnMenu ul 11 
{ 

width: 160px; 

} 
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16. Save all your changes and then request Default .aspx from the photoAibums folder In your 
browser. Choose a photo album from the drop-down list and the page reloads, showing you the 
relevant pictures In the photo album. 


COMMON MISTAKES If nothing happens when you choose a new item from 
the drop-down list, go back to VS and ensure you set AutoPostBack on the 

DropDownList COntrol tO True. 

If you don't have any pictures in a photo album, or not enough to fill an entire 
page, choose New Album from the Gig Pics menu, create a new photo album, 
and add at least four images to it. Then click the Gig Pics menu item and choose 
your new photo album from the drop-down list. Note that there is now a paging 
user interface, enabling you to move forward and backward through the list of 
pictures in the photo album using the First, Previous, Next, and Last buttons vis- 
ible at the bottom of the screen in Figure 14-22. Because of the AJAX panel you 
added, the selection and paging operations now occur completely flicker-free. 


NOTE Your first few albums will end up broken. That's because you didn't sup- 
ply images when you created them. You can delete the albums (and their associ- 
ated picture rows) from the database if you want to clean up a bit. In Chapter 16 
you develop functionality to delete images from the Default . aspx page in the 
PhotoAibums folder. 


Home > Gig Pics > Gig Pics 

I Latitude Festival v | 



FIGURE 14-22 
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How It Works 

M ost of what you have seen in this exercise shou id befamiiiar. You connected a DropDownList to an 
EntityDatasource using a method simiiarto the one you used to create the Genres drop-down iist in 
the previous chapter. TheListview and its associated EntityDatasource areaiso simiiarto what is 
discussed eariier in this chapter. H owever, instead of a where parameter that iooi<s at the query string, 
the code now uses a where parameter that iooi<s at the DropDownList: 

<WhereParameters> 

<asp : ControlParameter ControlID="DropDownListl" Name="PhotoAlbumId" 
PropertyName="SelectedValue" Type="Int32" /> 
</WhereParameters> 

Because you set AutoCenerateWhereClause tO True On the EntityDatasource COntroi, a Where CiaUSe 

is created on the fly based on these parameters. This is in contrast to an eariier exampie where you 
explicitly defined a where clause. For simple scenarios as in the preceding exercise, relying on the auto- 
matically generated where clause worl<s fine. For more detailed scenarios, it's good to l<now you can 
also assign one explicitly. 

W hen the EntityDatasource is about to get its data from the database, it looks at the seiectedvaiue 
property of the drop-down list and then retrieves only the pictures that match the requested 

PhotoAlbumld. 

The biggest difference from previous examples is the addition of the DataPager. As demonstrated in 
this exercise, paging is handled for you automatically. All you need to do is embed a oatapager con- 
trol somewhere in the LayoutTempiate of theListviewand the rest istal<en care of automatically. If 
you pi ace the DataPager outside the Listview, don't forget to hool< it up to theListview by setting 
the pagedcontroiiD property. If you prefer linl<s or images over buttons, you can set the ButtonType 
property of theNextPreviousPagerPieid element to Link or Image, respectively. If you prefer a 

numeric pager, replace the NextPreviousPagerPield item with a NumericPagerPield: 
<asp:NumericPagerField NextPageText=" ..." PreviousPageText= " ..." /> 

In this exercise you set the pagesize to 3 so it's easier to fill more than one page and seethe pager at 
work. In real-world applications the pagesize is usually a bit higher, such as 10 or 20. Because the lay- 
out uses a three-column layout for the M onochrome theme and a two-column layout for the DarkGrey 
theme, you may want to select a value that's dividable by both, such as 18. 


A Few Notes about Performance 

The preceding exercise has two known performance problems that you should be aware of. First, 
although the itemTempiate of theListview resizes the i mages to 180 pixels in the browser by set- 
ting their widths through CSS, the actual image is left unmodified. This means that if you upload 
a large image, the entire image is still downloaded, only to display as a small thumbnail image. It 
would be better to create a true thumbnail image at the server, and send that to the browser instead. 
The chapter entitled "Greeting Cards" in my book ASP.N ET 2.0 I nstant Results (ISBN : 978-0-471- 
74951-6) has a number of examples on resizing images on the server. 
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The other potential performance problem lies In the way the data Is paged. With theoataPager 
control, the data Is paged Inside the ASPX page. That means that all data Is retrieved from the data- 
baseand sent to theEntityDatasource control. TheoataPager control then selects the right rows 
to display on the current page. This works fine for result sets of up to hundreds of rows. H owever, 
as soon as the number of Items In a photo album or other collection grows above that number, you 
may find that your pages start to slow down. If that's the case, you may want to look at paging at 
the database level. The ADO .N ET Entity Framework supports this scenario using the skip o and 
Takeo methods you've Seen before. 


PRACTICAL LINQ AND ADO.NET ENTITY FRAMEWORK TIPS 

Here are some practical LINQ and ADO.N ET Entity Framework tips: 

>■ In this chapter you saw how to create anonymous types to shape the data you want to return 
from your queries. The compiler and IntelllSense are Invaluable tools In determining what 
data you can return and what properties you have available. Spend sometime playing around 
with the anonymous types, looking at the different options that the IntelllSense lists give you. 

>• J ust as with other data access methods, like the sqioatasource control you saw In the 
previous chapter, try to filter your data as much as possible. If you know you only need 
reviews In the Jazz genre, be explicit and Incorporate a where clause In your code or 
EntityDatasource control that limits the llst of revlews at the database level. This speeds up 
your queries and data retrieval. Improving the overall speed of the application. 

>• M ake use of anonymous types to decrease the memory consumption of your LINQ queries. 
For example. Instead of retrieving the entire Review object, use the New (newin C#) keyword 
to create a new anonymous type on the fly. Because this new object contains only the proper- 
ties you really need, you save yourself the overhead of bringing In the full object. 


SUMMARY 

LINQ Is a compelling and exciting technology that ships with .N ET. LIN Q Is an Important plumb- 
ing technique In many data access scenarios. Including database access In ASP.N ET web applica- 
tions using the ADQ .N ET Entity Framework. 

Because LIN Q Is so Important, It has been Integrated In many different places In .N ET. LIN Q Is 
available for objects enabling you to query In-memory collections. Additionally, LINQ Is available 
for X M L, ADQ.N ET, and DataSets, each type providing access to a different data store, but with 
the same, unified querying language. LINQ Isalso used asthequery language for theADQ.N ET 
Entity Framework. 

To work with EF In your ASP.N ET web applications you have a couple of different options. First, 
you can write queries In the Code Behind of a page and then bind the results to a data-bound con- 
trol using theoatasource property and Datasind method of the control. Alternatively, you can use 
the EntityDatasource control that serves as the bridge between your data-bound controls and your 


Summary | 551 


model. Combined with tlienew Listviewand DataPager controis, tlieEntityDatasource enables 
you to create fully functional CRUD pages. 

Until now, the database-driven pages you have seen look quite dull. You haven't applied a lot of styl- 
ing, or provided any conditional formatting, where data is presented differently based on its values. 
You can do this through control styles and the many events of the data-bound and data source con- 
trols. The next chapter shows you how to make use of these styles and events. 


EXERCISES 


1. Imagine you have a page in the Reviews folder called MostRecent . aspx. This page should show 
the 10 most recently added reviews. What would your LINQ query look lil<e if you only wanted to 
show the review's Title property and the name of the genre it belongs to? You should use the 
Take method to limit the result set to 10. If you're having trouble writing the code to get the last 
reviews, lool< at the section titled "First, FirstOrDefault, Last, and LastOrDefault," which shows you 
how to get the last review in the database. 

2. What is the major benefit of the Listview control over other data controls like Gridview and 
Repeater? 

3. Currently the Default . aspx page from the PhotoAibums folder just shows the thumbnails of the 
pictures. What would you need to do to display the full-size picture on its own page using a LINQ 
query? 


4. When you delete a picture from the Listview on the Photo Album page, only the database row is 
deleted, but the image on disk is left untouched. Make use of the static System. lo. File .Delete 
method to delete the item from disk. Choose an appropriate event of the EntityDataSource to 
handle this and make use of the Entity property that is available on the e argument of the event. 

5. Currently, the AiiByGenre . aspx page displays the title of the genre, regardless of whether it has 
any reviews attached to it. I-How can you hide genres that don't have any reviews? Make use of the 
Count method on the Revi ews collGCtion to solve this C|uestion. 


You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 


ADO.NET Entity Data Model file 

The file that contains the information necessary to map your 


ohiert model to the table*^ in vour database 

Anonymous types 

Types that are created on the fly without defining them explicitly 

Entity Framework 

A technology to create a strongly typed object model with an 


underlying database that enables you to interact with the data in 


your database 

Entity sets 

A collection of objects in your entity model; for example, a 


PhotoAlbum instance has a Pictures entity set that contains 


the nictures in the album 

LI 1 ^ 1 l-LJ 1 V- O III Lllv^ vJllw/lwllll* 

EntityDataSource control 

An ASP.NET control that serves as a bridge between your ASPX 


pages and the Entity Framework 

Lazy loading 

A technique in which data is not loaded from the database until it 


is accessed at run time 

LINQ 

Language-Integrated Query; the part of .NET Framework pro- 


gramming languages that provides querying support against all 


rxlllUo \Ji UaLa ^WIIC^LIUI lo, lll^iutjlll^ UUJcrCLo, /\IVI1_, dliu UCiLciUCiocro 

Range variable 

A variable defined in your LINQ query that is subsequently used 


in the Select and where parts 

Strong typing 

A programming concept in which the type of a variable is explic- 


itly defined when the variable is declared 

Type inference 

A technique in which the compiler determines the type of a 


variable based on the data it gets assigned; this enables you to 


create strongly typed variables without explicitly defining the 


variable's type first. 


Working with Data — Advanced 
Topics 

WHAT YOU WILL LEARN IN THIS CHAPTER: 

>• How to change the formatting of the various data-bound controls 
using styles, themes, and skins 

> How to handle the various events that are fired by the data controls 
to change their appearance conditionally 

> How to hand-code the Ul of data access pages to get complete free- 
dom over the pages' structure and markup 

>" How to use the built-in caching mechanisms to improve the perfor- 
mance of your website 

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 

www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the Chapter 15 download. 

The previous three chapters introduced you to a lot of new concepts. Chapter 12 discussed 
databases in general and SQL Server 2012 Express LocalDB edition in particular. That chap- 
ter also covered the basic operations to create, read, update, and delete data. Chapter 13 
focused mostly on working with the sqiDatasource control and the different data-bound 
controlsthat you have at your disposal. Finally, Chapter 14 explored the world of theADO 
.N ET Entity Framework, M icrosoft's latest data access technology designed to speed up the 
way you write data access code. 

To help you really understand the core concepts of data access, those three chapters focused 
mainly on the data source controls and the principles behind them, and much less on the 


554 I CHAPTER 15 WORKING WITH DATA - ADVANCED TOPICS 


presentation of data with tlie data-bound controls. 0 bviousiy, in a reai-worid application this is not 
enough, and you need a way to present data in a clear and attractive way. 

The data-bound controls that ship with ASP.N ET 4.5 provide many options to change the way data 
is presented. They enableyou to completely change the design (font, colors, spacing, and so on) of 
the data they are presenting. Additionally, you can tweak these controls to hide specific columns, 
modify column headers, and even change the lool< and feel of the controls programmatically. 

In the next sections you see how to style your controls using a variety of techniques. Later sections 
in this chapter show you how to hand-codeyour data access pages, giving you great flexibility. N ear 
the end of the chapter, caching — a technique to improve the performance of your website— is 
discussed. 


FORMATTING YOUR CONTROLS USING STYLES 


Chapters 13 and 14 explained how to work with the numer- 
ous data-bound ASP.N ET 4.5 controls. You learned how to 
display and edit lists of data with controls like cridview. 
Repeater, and Listview, as Well as how to work with 
single record controls such as Detaiisview. 

So far, you've relied on the built-in look and feel of the con- 
trols, which often results in dull and plain-looking screens. 
Figure 15-1 shows the cridview that you created in 
Chapter 13 to manage the genres in the Planet Wrox data- 
base in Firefox. 

This control relies on the default settings of the browser 
to display text and links, which usually results in purple 
and blue links with the default font, such as Times 
N ew Roman. Additionally, the columns in thegrid 
are just as wide as necessary to display the text 
they contain. It would be a lot easier on the eyes if 
you could present the Gridview as in Figure 15-2 
instead. 



M 

Name 

SortOrder 

Edit Delete Select 

1 

Rap and Hip-Hop 

14 

Edit Delete Select 

2 

Pop 

12 

Edit Delete Select 

3 

Jazz 

8 

Edit Delete Select 

4 

Hard Rock 

3 

Edit Delete Select 

5 

Indie Rock 

7 

Edit Delete Select 

6 

Punk 

1 

Edit Delete Select 

7 

Rock 

2 

Edit Delete Select 

S 

Grunge 

4 

Edit Delete Select 

9 

Alternative Rock 

9 

Edit Delete Select 

10 

Reggae 

11 

12 


FIGURE 15-1 


The column for the Edit and Delete links is now 
a little wider, separating it clearly from the actual 
content in the grid. The id column has been hidden 
and the Name column has been made wider as well. 
The different colors for the header, footer, items, 
and alternating items make the data in thegrid a 
lot easier to read. Because some genres have reviews 
attached to them, their Delete links are disabled. 
And finally, a little glyph has been added to the N ame heading to indicate the direction the column 
is sorted on. 
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FIGURE 15-2 
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Changing the dull-looking cridview from Figure 15-1 into the snazzier one shown in Figure 15-2 
is easily accomplished with the use of ASP. N ET styles and the many events that the data-bound 
controls fire. In the next section you see how to apply these styles to a singlecontrol in a page. In 
the section that follows you see how to move the styles to a theme, so styles can be reused more eas- 
ily by all controls in a section of your site. You have already seen some styles at worl< in Chapter 7, 
where you used them to style the Menu and theTreeview controls. However, because styles are used 
so much for formatting data-bound controls, they really deserve their own section. 


An Introduction to Styles 

M any of the data-bound and navigation controls have a number of style properties that enable you 
to modify the look and feel of the control. For example, thecridview control has Rowstyie and 
AiternatingRowstyie properties that enableyou to customize the look of an individual row in the 
grid. H ere's an example of a cridview with two style elements that renders odd and even rows with 
different background colors: 

<asp:GridView ID="GridViewl" runat=" server "> 

<AlternatingRowStyle BackColor="White" /> 

<RowStyle BackColor="#EFF3FB" /> 
</asp:GridView> 


Likewise, theoetaiisview has a commandRowstyie property that is used to 
control the appearance of the command row that holds commands such as 

Insert, Delete, Cancel, and SO On. 

Ultimately, each style property inherits from the style class that lives in the 
System. Web. ui .webcontrois namespace. Figure 15-3 showsyou afiltered 
view of the diagram for this class with its most common properties visible. 


style 

Class 

Component 


^ Propertie 


BaclcColor 
BorderColor 
BorderStyle 
BorderWidth 
CssClass 
Font 

ForeColor 
Height 
Width 


S Methods 


As you can see from their names, the properties of the style class are used 
to change style-related information on the objects to which this class is 
applied. Each of these properties is eventually converted to a CSS property or 
an HTM L attribute, such as background-color, border, and so on. Other 
styles, I ike the styles for the Gridview control, add various layout-related 
properties, such as different options to control alignment. The following 
table lists the most important properties of the various styie-derived classes 
that are available. N ote that not every property is available for every style. Intel 11 Sense showsyou 
exactly what properties you can use in a certain style. 


i: 


FIGURE 15-3 


PROPERTY DESCRIPTION 


BackColor 
ForeColor 

These enable you to change the background and text color of the ele- 
ments. They map to the CSS properties background- color and color, 
respectively. 

BorderColor 
BorderStyle 
BorderWidth 

These enable you to change the border of the element to which the style 
is applied. They map directly to their CSS counterparts border-color, 
border-style, and border-width. 


continues 
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(continued) 


PROPERTY 

DESCRIPTION ^^^nmm^^^^mn^^g^^m^^gg^n^ 

CssClass 

This enables you to assign a CSS class instead of inline style information. 

I UU ^1 IwUlU yiVtr fJI tr 1 fcrl trl It-fcr LU LI Itr l_ to fci l_ ± d. t> ti pi UjJfcrl Ly wVtrl LI Itr lilUIVIUUal 

style properties because they minimize page bloat. You see how to use 
CssClass in a later exercise. 

Font 

This enables you to set the font for the element through the various 
subproperties like Font-Names, Font-Size, and Font-Bold. These 
properties end up as various CSS font properties, such as font-family, 
font-size, and font-weight. 

HorizontalAlign 
VerticalAlign 

These end up as align and valign attributes on the HTML element to 
which they are applied and enable you to control the alignment of the con- 
tents of the element. For example, you use HorizontalAlign to left-, cen- 

tor r\r rinht-ali/^^l tho tovt r^f tho imn ho^Horc r\f a (^v--i i-~)T7-i a^tj 
Lfcrl , Ul II^IILdlllJIl Lllfcr LfcrAL (Jl Lllfcr l^UIUMIM llfcraUfcrlb (Jl a \jL j.Llv ±cvJ. 

Note: These properties output HTML attributes that are obsolete in HTML5. 
Most browsers will still render them as intended, but if HTML5 conformance 
is important, you shouldn't use these properties, but use your own CSS 
class assigned with the CssClass property. 

Wrap 

This ends up as a white -space : nowrap; CSS declaration when set to 
False and determines whether a piece of text is allowed to wrap to a new line. 

Height 
Width 

These enable you to control the height and width of the elements to 
which they are applied and map directly to their CSS height and width 
counterparts. 


Check out the M SDN documentation (at http://bit.iy/Lb3wzd) for a full description of the 

style class. 

The different data-bound controls each have a different set of styles, although they do share a few. 
T he fol low i ng table I i sts the aval lable styles for the cridview and describes thei r pu rpose. T he other 
data-bound controls have slightly different styles, but from their names you should beableto see what 
they do and determine what they are used for. Another good way to learn more about the different 
styles that are available is by using Visual Studio's Auto Format, which inserts a number of styles for 
you. You see later how to use and improve the styles that are generated by the Auto Format feature. 


STYLE 

DESCRIPTION 

RowStyle 

AlternatingRowStyle 

These control the look of a single row. By default, the 
RowStyle affects all rows. The AlternatingRowStyle is 
used only on even rows when it's set. 

SelectedRowStyle 

This can be applied to selected rows, and gives you the 
opportunity to visually present selected rows differently 
from unselected rows. 


Formatting Your Controls Using Styles | 557 


STYLE 

DESCRIPTION 

EditRowStyle 

This can be applied to rows that are currently in Edit mode. 
For example, when you click the Edit link for a row in the 
Gridview on the Genres page in the Management section, 
the row switches to Edit mode and this EditRowstyie is 
applied. 

EmptyDataRowStyle 

This enables you to define the look of the row that is dis- 
played when the grid is bound to an empty data source. 
This style works together with the EmptyDataText prop- 
erty of the grid that contains the text displayed when no 
records exist, or with the EmptyDataTemplate that enables 
you to define your own custom template to be displayed 
when an empty data source is used. 

HeaderStyle 
FooterStyle 

These control the appearance of the header and footer 
rows. 

PagerStyle 

This enables you to influence the look of the pager bar dis- 
played in the Gridview when paging is enabled. 

SortedAscendingCellStyle 
SortedAscendingHeader Style 
SortedDescendingCellStyle 
Sort edDescendingHeader Style 

Collectively, these styles enable you to change the looks 
of the header and the entire column when the column is 
sorted in ascending or descending order. 


Some controls, like Repeater and Listview, have no built-in styles. Because these controls do not 
contribute any H TM L to the page all by themselves and leave it up to you to define the lool< and feel 
in the numerous templates these controls liave, there is no point in having separate styles; you can 
simply add the necessary style or class information to the elements you define in their templates. 

To sliow you liow to use these styles with your controls, the following exercise guides you througli 
the process of enhancing the Gridview control in the Genres page of the M anagement section. In a 
later exercise, you see liow to move the style-related information to a themeand CSSfileto improve 
the reusability of the code and to reduce the amount of H TM L sent to the browser on each request. 


lljUflf;]^] Applying Styles 

In thisTry ItOut, you use the built-in formatting capabilities of VS to cliange the appearance of the 
Gridview cohtrol. You See how VS creates the necessary styles for you, eacli with its relevant styling 
properties set. 

1. 0 pen Genres . aspx from the Management folder of the main Planet W rox website that you liave 
been worl<ing on so far. 

2. Switcfi to Design View and open the Gridview control's Smart Tasl<s panel. M al<e sure you open 
that of the Gridview and not the one for the surrounding content blocl<. 
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3. At the top of the panel, click the Auto Format link. 

4. From the list of format schemes on the left, choose Classic. The Preview on the right is updated and 
now looks like Figure 15-4. 
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FIGURE 15-4 


5. Click OK to have VS generate the necessary templates for you. Thecridview is updated in Design 
View immediately, showing the selected format scheme. 

6. Switch back to ivi arkup View and inspect the various styles that have been generated. You should 
see the following styles, some placed before and others placed below the<coiumns> element: 

<AlternatingRowStyle BackColor="White" /> 
<EditRowStyle BackColor= "#2461BF" /> 

<FooterStyle BackColor="#507CDl" Font-Bold="True" ForeColor= "White " /> 
. . . Some styles are not shown here to save some space 
<SortedDescendingHeaderStyle BackColor="#4870BE" /> 

7. Save the changes to the page and request it in the browser by pressing Ctrl4f 5. You should seethe 
list of genres with the selected formatting scheme applied. 

8. Open the HTIVI L source for the page by right-clicking the page in the browser and choosing the 
View Source or View Page Source command. Scroll down a bit until you see an HTIVI L table with 
its id set to cpMaincontent_Gridviewi. You'll See that the table itself has a style attribute that 
sets text color and border properties: 

<table cellspacing="0" cellpadding="4" id="cpMainContent_GridViewl" 
style=" color : #333333 /border -col lapse : collapse; " > 
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Additionally, you see that the numerous child elements of the table (table rows and anchor ele- 
ments) all have different style settings applied. For example, odd and even rows now have the fol- 
lowing style applied: 

<tr style="background-color :#EFF3FB; "> ... </tr> 
<tr style= "background-color : White; "> ... </tr> 

Close the source document and clicl< the headers of thecridview a few times. The header 
changes color to indicate the column is now sorted. 

How It Works 

The different style elements you created in step 5 are converted into their CSS and HTML equivalents. 
For example, Rowstyie and AiternatingRowstyie have their Backcoior set to a different bacl<ground 
color: 

<RowStyle BackColor="#EFF3FB" /> 
<AlternatingRowStyle BackColor= "White" /> 

W hen the control renders its H TM L, it applies these bacl<grounds to the table row of the items and 
alternating items: 

<tr style="background-color : #EFF3FB; " > ... </tr> 
<tr style= "background-color : White; "> ... </tr> 

The same principle is applied to the other styles in thecridview. 

If you look at the source of the page in the browser, you see a lot of page bloat, because each individual 
row has its properties set. This increases the page size, especially with larger results displayed in the 
Gridview. To decrease the page size and improve the performance of the page, you could move the style 
definitions to a page theme and then use CSS and jQuery instead. You see how to do this next. 


Combining Styles, Themes, and Skins 

Chapter 6 discussed how to create consistent-looking web pages using master pages, themes, and 
skins. With the basic theme infrastructure set up, it's now easy to add a new theme that applies to 
theentireM anagement section. Earlier you saw how to createa skin fileto change the appearance 
of a button; in the following exercise you see how to reuse this concept to createa skin fileforthe 
Gridview, enabling you to style all Gridview controls in the Management folder in one fell swoop. 

^^^^^^Q Creating Advanced Style Solutions 

In this Try It 0 ut, you move the various style properties from the Genres .aspx page into a separate 
.skin file. You also move the inline style information to a separate CSS file. You then usesomejQuery 
to separate data and appearance of the page even further. 

1. On the Solution Explorer, right-click the App_Themes folder, chooseAdd o Add ASP.N ET 
Folder o Theme, and type Management as the new theme name. 
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3. 


4. 


6. 


7. 


Right-click tliis new folder and choose Add o Add N ew Item. 
Add a sl<in filecalled Gridview.skin. You should end up with a 
Solution Explorer lool<ing lil<e Figure 15-5. 

Open the Genres, aspx page in M arkup View and 
delete all the style elements you created in the previ- 
ous exercise except the HeaderStyle, the PagerStyle, 
the SortedAscendingHeaderStyle, and the 

sortedDescendingHeaderstyie. From thefour remaining Styles, 
remove all attributes and replace them with a single cssciass 
attribute named after the style and prefixed with cridview. Y ou 
should end up with the following styles: 


Solution Explorer v:-:-:-::-:-:-;;-:-;-; 




Search Solution Explorer (Ctrl+;) 



[Jl Solution 'Site' (1 project) 



^ @ Site 


1 

> 0 About 



> 0 App_Code 



> App.Data 



^ App_Themes 



> O DarkGrey 



^ (3 Management 


J>i GridView.skin 



> O Monochrome 



> £ Bin 



> 0 Controls 




FIGURE 15-5 


<HeaderStyle CssClass="GridViewHeaderStyle" /> 
<PagerStyle CssClass="GridViewPagerStyle" /> 
<SortedAscendingHeaderStyle CssClass="GridViewSortedAscendingHeaderStyle" / > 
< SortedDescendingHeaderstyie CssClass="GridViewSortedDescendingHeader Style" /> 

Don't worry if VS adds red error lines under the CSS class names. Because the CSS classes aren't 
defined yet, it can't find them. Later, you add them to the theme's CSS file, whereVSstill can't 
find them. They'll work fine at run time, though, so don't worry. 

Select the styles in the code editor and then cut them to the clipboard using Ctrl-f-X . Switch to the 
Gridview.skin file, delete all existing code (the comment text you saw earlier), and paste the 
styles into the skin file. 

Wrap the styles in an <asp:Gridview> element with its runat attribute set to s erver and its 
cssciass attribute set to Gridview. Don't add an id attribute, because skin files don't need this. 
You should end up with this code: 

<asp: Gridview runat= " server " CssClass= "Gridview" > 

. . . styles go here 
</asp : GridView> 


Open the resources folder for this chapter (located at c:\ 

BegASPNET\Resources\Chapter 15 if yOU follOWed the instruc- 
tions in the Introduction section of this book) in File Explorer 
(Windows Explorer in Windows?), select the images folder and 
the Management. CSS file, and pressCtrl-fC to copy them. Switch 
back to VS, click the Management folder under App_Themes, and 
press Ctrl -f-V . J ust as the other two themes do, the management 
theme now has its own stylesheet and images folder, shown in 
Figure 15-6. 

The two images are used to change the header for sorted col- 
umns in the Gridview, as you will see later. 


Solution Explorer 


Search Solution Explorer (Ctrl+;) 
^ £1 App_Themes 
> O DarkGrey 


^ Q Management 


^ £1 Images 

S SortAscending.png 
S SortDescending.png 
GridView.skin 
Management.css 
O Monochrome 


FIGURE 15-6 


Open the web.conf ig file for the Management folder in the root that you added earlier and set the 

theme tO Management: 


<system.web> 
<pages theme= 

</system.web> 


■Management" /> 
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8. Open the Management, master filefrom the MasterPages folder, switch to M arkup View, and 

below the ContentPlaceHolder in the <head> SeCtion Of the page, drag the jquery-l. V .2 .min 

. js fiiefrom the scripts foider. VS inserts the foiiowing <script> element for you: 

</asp : ContentPlaceHolder> 

< script src=" . . /Scripts/j query- 1 . 7 . 2 .min. j s"></script> 

</head> 

9. Go bacl< to Genres .aspx and in M arl<up View, under the columns element of thecridview con- 
trol, delete the bound field for the id column. Users typically don't need to see the IDs of items 

in the user interface because they are often meaningless to them. By removing the id column, you 
reduce the noise in the page. Set the itemstyie-width for the commandpieid to loopx and for the 

Name COlumn tO 200px. Finally, set ShowSelectButton Of the CommandField tO False, and Set the 

HeaderText of the sortorder field to Sort Order With a space between the words. Y ou should 

end up with this CridView: 

<asp:GridView ID="GridViewl" runat=" server" AllowPaging="True" 

AllowSorting="True" AutoGenerateColumns=" False" DataKeyNames=" Id" 
DataSourceID= " SqlDataSourcel " GridLines= "None " CellPadding= " 4 " 
ForeColor="#333333" EmptyDataText="There are no data records to display. "> 
< Columns > 

<asp: CommandField ShowDeleteButton="True" ShowEditButton="True" 
ShowSelectButton="False" ItemStyle-Width="100px" /> 

<asp:BoundField DataField="Name" HeaderText="Name" 

SortExpression="Name" ItemStyle-Width="200px" /> 

<asp:BoundField DataField="SortOrder" HeaderText= "Sort Order" 
SortExpression="SortOrder" ></asp :BoundField> 

</ Columns > 
< /asp : Gr idview> 

10. Scroll down to the end of the page in M arl<up View and, right before the closing </asp: content > 
tag, add the following jQuery code wrapped in a <script> block: 

<script type="text/javascript"> 
$ (function ( ) 
{ 

$ ( ' .GridView tr: odd mot { . GridViewPagerStyle) ' ) . 

addClass ( ' GridViewAlternatingRowStyle ' ) ; 

)); 

</ script> 

11. Save all your changes by pressing Ctrl+Shift+S and then open Genres. aspx in the browser. You 
should now seethe list of genres that was presented in Figure 15-2, except for the disabled Delete 
links, which you add later. Click the header of the N ame or Sort Order columns to order the data 
in thecridview. N otice how thecridview now shows a little glyph beside the name to indicate 
the sort direction. 

12. Click M anage Reviews in the main M anagement menu to open the Reviews page. Select a genre 
from the drop-down list to display a list of reviews. N otethat the Reviews list — visible in Figure 
15-7 — now also has the same styles applied as the Genres list you saw earlier, except for the alter- 
nating row styles applied byjOuery. 


562 I CHAPTER15 WORKING WITH DATA -ADVANCED TOPICS 


Indie Rock ~vj 


Title 

Authorized 

CreateDateTime 

Delete 

Sonic Youth; Daydream Nation live in Roundhouse, London 

Yes 

11/14/2007 S: 19 PM 

Delete 

Sonic Youth: Daydream Nation live at Lowlands, Biddinghuizen 

Yes 

11/14/2007 S: 27 PM 

Delete 

Day 8c Age by The Killers - Excellent album, but is it better than 
before? 

Yes 

11/24/200S 10:01 
PM 

Delete 

The Pains of Being Pure at Heart - One of the best new British bands 
from the U.S.? 

Yes 

2/3/2009 2;4S PM 

Delete 

P.J. Harvey & John Parish - A Woman a Man Walked By 

No 

4/1/2009 1:03 PM 

Delete 

Battle for the Sun by Placebo - Possibly the best album of 2009 
already 

Yes 

6/9/2009 9:01 PM 

Delete 

Sonic Youth: The Eternal - Takes time to get used but then.... 

Yes 

6/10/2009 9:33 PM 

Delete 

Farm by Dinosaur Jr 

Yes 

6/23/2009 10:36 PM 

Delete 

Oscar & the Wolf - Summer Skin 

Yes 

8/9/2012 6:28 AM 

Delete 


Insert New Review 


FIGURE 15-7 

How It Works 

The concepts from this exercise should be familiar by now. You have seen how to createand apply 
themes and skins in Chapter 6, and how to use the various control styles in the previous exercise. You 
also saw the concepts behind jQuery in Chapter 11. W hat may be new is the way that odd rows in the 
Gridview are Selected to dynamically change their background color, skipping the footer row using the 
not filter: 

$(' .Gridview tr :odd:not ( .GridViewPagerStyle) ') 

First, all odd table rows are selected using the selector .Gridview tr :odd. H owever, depending on 
the number of rows in the Gridview, this may also select the footer row (with the paging controls 
in it) because the footer is rendered as a <tr> as well. To stop the footer from being included you 
use the not filter and pass it an expression on which you want to filter. In this case, the expression is 
.GridViewPagerStyle because that's theclass name applied to the footer row. ThejQ uery code is only 
applied to the Genres, aspx page, but you could move it to the M anagement master page or copy it to 
individual pages. Either way, it helps in removing page bloat because you don't have to add a style or 
class attribute to each row in the Gridview. I nstead, you can let jQ uery figure out what rows are odd 
and even. If you want, you can create a contentpiaceHoider in the master page for the M anagement 
section as you've done with the Frontend. master file, in which to put page-specific JavaScript code. 

Assigning the image to the sorted column header requires changes to a few selectors. First, each sorted 
header (ascending or descending) is given some padding: 

. GridViewSortedAscendingHeaderStyle , . GridViewSortedDescendingHeaderStyle 
{ 

padding-lef t : 20px; 

} 

This moves the text in the header cell a bit to the right, making room for the image. Then for both the 
ascending and descending sort order, there is a separate selector that assigns the image. The selector is 
applied by ASP.N ET by adding a class attribute to the relevant HTML elements. The following shows 
the selector for a column that is sorted in ascending order: 

. GridViewSortedAscendingHeaderStyle 
{ 
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background- image : url (Images/SortAscending.png) ; 

} 

The .GridviewHeaderstyie th Selector then stops the background image from repeating, positions 
the image near thetop, and determines the baci<ground coior and text alignment; 

.GridviewHeaderstyie th, .GridViewPagerStyle 
{ 

background- color : #BCD1FE; 
background-repeat: no-repeat; 
background-position: 0 5px; 
text-align: left; 

} 

By moving your control style declarations to a separate skin file that in turn is part of a theme, you have 
created a very flexible, maintainable solution. If you want to see how the new styles are applied, open 
the source of the page in the browser using itsView Source command. Instead of inline styles, the rel- 
evant class attributes are applied. If you want to change the layout of all thecridview controls in the 
M anagement section, all you need to do now is modify the relevant CSS in the Management, ess file. If 
you need to make changes to other styles, don't forget to add them to the Gridview. skin file first. 

Obviously, you can still tweak the controls at the page level. Though the skin defines the global 
look and feel of thecridview, you can still set individual properties on columns as you did with the 
itemstyie-width in the Genres page. 


Although styles, skins, and themes are powerful tools to styleyour web pages, you'll find 
that they are often an all-or-nothing solution. For example, if you create itemstyie and 
Aiternatingitemstyie elements (rather than using jQ uery as you just did), they are applied to each 
and every row in the grid. W hat if you wanted to change the look and feel of just a few rows? 0 r 
what if you wanted to change some rows based on the actual data that the row is holding? You see 
how to accomplish conditional formatting and more, using event handling, in the following section. 

HANDLING EVENTS 

Previous chapters have covered how theASP.N ET controlscan raise events. You learned how to handle 
these events with event-handler codethat you typically add to the page's Code Behind file. For exam- 
ple, you wrote code to handle a Button control's ciick event. Additionally, in the preceding chapter, 
you learned how to react to various events — such as inserting and inserted — that happen just 
prior to and after interaction with the database. H owever, most controls expose a lot more events. 

A solid understanding of the various events that fire during a control's life cycle and the order in 
which they fire is important knowledge for an ASP.N ET developer. Being ableto hook into the con- 
trol's life cycle, tweaking parts of the output as you go, enables you to create flexible, dynamic web 
pages that do exactly what you want. 

To gain an understanding of the various events and the order in which they fire, the next section 
explains the basic steps in theASP.N ET control life cycle. You won't see every event that is fired in 
the process, but instead you seethe ones you are most likely to use. Later sections then show you 
how to make use of these events to change the behavior of your web pages. 
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The ASP.NET Page and Control Life Cycles Revisited 

In Chapter 6 you learned about the stages in a page's life. You learned about different events such 
as preinit, Load, preRender, and Unload. Besides these events that are raised by the ASPX page, 
all the other controls in your ASPX pages can raise their own events. These events can be as simple 
as a Button control's ciick event (triggered by a user action) or be more complex events, such as 

Inserting, Which iS raised by controls lil<e theEntityDataSource and the SqlDataSource, or the 

DataBound event that is raised by various data-bound controls. You see many of these events in the 
next exercise. 


TRY IT OUT 


Seeing the Page and Control Life Cycles at Work 


To give you an idea of the different events that you can hool< into during a page or control's life cycle 
and the order in which they fire, thisTry It 0 ut shows you how to set up a page that displays some data 
from the Genres table using an EntityDatasource. You also add a button to the page that you can use 
to trigger a postbacl< to see how that influences things. You then hook up a number of event handlers to 
a few interesting events of the controls on the page so you can see in what order things are called. You 
can apply the concepts you learn in this exercise to any other page or control that raises events to get a 
better understanding of how they operate. 

1. Inside the Demos folder, create a new file called Events, aspx. M akesure it's based on your custom 
page template so it inherits from BasePage. Set the page's Title to Events Demo. 

2. Switch the page to Design View, drop a cridview into the cpMaincontent placeholder, and then 
hook it up to a new EntityDatasource control using theGridview's Smart Tasks panel. Use 
PlanetW roxEntities as the N amed Connection and bind the EntityDatasource control to the 
Genres entity Set. There's no need to set up insert, update, or delete behavior, nor do you need to 
select specific columns or add a where clause. 

3. Back on theGridview control's Smart Tasks panel, click Refresh Schema if theGridview doesn't 
show the columns for the id. Name, and sortorder. Then enable sorting by selecting the second 
check box. When you'redone, your codeshould look likethis: 

<asp : GridView ID="GridViewl" runat= " server " AutoGenerateColumns=" False" 

DataKeyNames= "Id" DataSourceID="EntityDataSourcel " AllowSorting="True" > 
<Colurans> 

<asp:BoundField DataField= " Id" HeaderText= " Id" 

ReadOnly="True" SortExpression="Id" /> 
<asp : BoundField DataField="Name" HeaderText="Name" 

SortExpression= "Name " /> 
<asp : BoundField DataField= "SortOrder " HeaderText="SortOrder" 

SortExpression="SortOrder " /> 

< /Columns > 
</asp:GridView> 

<asp : EntityDatasource ID="EntityDataSourcel" runat=" server" EntitySetName="Genres" 
Connect ionString= "name^PlanetWroxEntities " EnableFlattening=" False" 
Def aultContainerName= " PlanetWroxEntities " > 

</asp : EntityDataSource> 
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4. M ake sure you're in M arkup View, and directly under tlie opening content tag and before tine 
Gridview add the following markup that creates a table with one row and two cells, each with a 
large heading (hi) and a Label control called NoPostBack and postBack, respectively. 

<table> 
<tr> 

<td><hl>No PostBack</hl><asp : Label ID="NoPostBack" runat="server" /></td> 
<td><hl>PostBack</hl><asp : Label ID="PostBack" runat="server" /></td> 
</tr> 
</table> 

5. Switch to Design View, and below thecridview drop a Button control and double-click it in 
Design View to set up an event handler for its click event in the Code Behind. 

6. Switch back to Design View and double-click the gray and read-only area of the page to set up a 
handler for the Page control's Load event. 

7. Switch to Design View again, click thecridview, and open its Properties Grid by pressing F4. 
Switch to the Events tab and double-click the following events to set up handlers for them in the 
Code Behind. After each handler, switch back to Design View by pressing Ctrl-f-Tab so you can add 
the next event. 


>- 

Sorted 

>- 

Sorting 

>- 

RowCreated 

>■ 

DataBinding 

>■ 

DataBound 

>- 

RowDataBound 


8. Repeat the preceding step, but now set up the following events for the EntityDatasource control: 

^ ContextCreating 
^ Selecting 

9. M akesureyou arein Code Behind and at the top of thefileadd the following imports/using 
statement; 

VB.NET 

Imports System. Runtime . CompilerServices 
C# 

using System. Runtime . CompilerServices ; 

Then below the last event handler (but still within the class definition), add thefollowing method 
that writes sometext to one of the two labels, depending on whether the current page request is 
the result of a postback: 
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VB.NET 

Private Sub WriteMessage (<CallerMemberName> Optional handlerName As String = "") 
If Page. IsPostBack Then 

PostBack.Text &:= handlerName & "<br />" 
Else 

NoPostBack.Text &= handlerName & "<br />" 
End If 
End Sub 

C# 

private void WriteMessage { [CallerMemberName] string handlerName = "") 
{ 

if (Page . IsPostBack) 
{ 

PostBack.Text += handlerName + "<br />"; 

} 

else 
{ 

NoPostBack.Text += handlerName + "<br />"; 

} 

} 

10. To each of the event handlers that you have set up, add the following code that calls your cus- 
tom method. Because you're not passing a value for the optional handlerName parameter, .N ET 
automatically inserts the name of the calling method because of the caiierMemberName attribute 
applied to that parameter in the WriteMessage method. Y ou see how this works later. 

VB.NET 

Protected Sub Page_Load (sender As Object, e As EventArgs) Handles Me. Load 

WriteMessage () 
End Sub 

C# 

protected void Page_Load (object sender, EventArgs e) 
{ 

WriteMessage 0 ; 

} 

11. Finally, add the following event handler to the Code Behind manually: 

VB.NET 

Protected Sub Page_PreRenderComplete (sender As Object, 
e As EventArgs) Handles Me . PreRenderComplete 

WriteMessage ( "Page_PreRenderComplete<br /> ") 

End Sub 

C# 

protected void Page_PreRenderComplete (obj ect sender, EventArgs e) 
{ 

WriteMessage ( "Page_PreRenderComplete<br /> " ) ; 

} 
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The preRendercompiete event fires Very late in the Page control's life cycle, mal<ing it an ideal 
place to put a line at the bottom of the event list. That way you can clearly see what set of events 
belong to each other, which in turn helps you to figure out what events are triggered during page 
load or a postback. 

12. Save all your changes and open the page in the browser. In addition to thecridview with the 
available genres, you should also see a list with event names under the N o PostBacl< heading: 

Page_Load 

EntityDataSourcel_Context Creating 

EntityDataSourcel_Selecting 

GridViewl_DataBinding 

GridViewl_RowCreated 

GridViewl_RowDataBound 

GridViewl_RowCreated 

GridViewl_RowDataBound 

GridViewl_DataBound 
Page_PreRenderComplete 


Note that theRowcreated and RowoataBound events are repeated multipletimes— once for each 
genre from the database plus two more. You see later why that is. C licl< the button below the 
Gridview to cause a postbacl<. The N 0 PostBack label won't change, but the PostBack label now 
shows the following list of event names: 

GridViewl_RowCreated 
GridViewl_RowCreated 

GridViewl_RowCreated 

GridViewl_RowCreated 

Page_Load 

Buttonl_Click 

Page_PreRenderComplete 


Click one of the column headers of thecridview to order the data it is displaying. N otice that the 
second label's text is extended with a second set of event names. Each set is separated by a line of 
dashes, created by the page_preRendercorapiete event handler. 

How It Works 

Technically, this exercise isn't complicated. You set up a bunch of event handlers for the various con- 
trols in your page. Inside the event handler you call a method that checks whether the page is cur- 
rently loading for the first time or is loading due to a postback. To make it easy to add the name of 
the calling method to the Label control, the handierName parameter of the method has a special 

CallerMemberName attribute applied, like this: 
VB.NET 

Private Sub WriteMessage (<CallerMemberName> Optional handierName As String = "") 
C# 

private void WriteMessage ( [CallerMemberName] string handierName = "") 
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This attribute is new in .N ET 4.5 and can beappiied to optional parameters (identified in VB.N ET 
witli tlie Optional i<eyword and a defauit vaiue, and in C#simpiy by assigning it a defauit vaiue). 
W lien no vaiue is passed to tliewriteMessage metliod for tliis parameter (as is tliecasefor most of tlie 
liandiers except for tlie iast one you added), .N ET fiiis it for you witli tlie name of tliecaiiing metliod. 
This is very convenient for debugging purposes because it enabies you to easiiy figure out wliicli metliod 
caiied writeMessage. In previous versions of .N ET you had to pass the name of the calling method 
manually in each call to writeMessage, making this code a bit more tedious to write. Also, because 
this attribute only has an effect when no value is passed in, you can still supply a value yourself, as is 
the case with the page_PreRendercompiete handler. Besides the method name, this code also passes 
theline break and the dashed line and, as such, you have to supply the value yourself. 

The WriteMessage method then updates one of the two Label controls with the name of the event that 
triggered the event handler. 

What'salso interesting about this exercise is the order in which the events occur. Takea look at thefirst 
list, displayed when the page first loads: 

Page_Load 

EntityDataSourcel_Context Creating 

EntityDataSourcel_Selecting 

GridViewl_DataBinding 

GridViewl_RowCreated 

GridViewl_RowDataBound 

GridViewl_RowCreated 

GridViewl_RowDataBound 

GridViewl_DataBound 
Page_PreRender Complete 


First Page_Load iS triggered. Then theCridView sees that it's hooked up to an EntityDataSource 

and asks that control for its data. This causes the Context Creating and Selecting events to be trig- 
gered. W hen the cridview receives the data from the EntityDatasource, it fires its DataBinding event 
to signal it's about to bind the data to the control. Thecridview then starts to create rows. For each 
item in the data source, it creates a row, fires Rowcreated, binds the item's data to the row, and finally 
calls RowDataBound. If you Carefully count the number of times that RowCreated and RowDataeound 
are called, you'll notice that the total number of calls is the actual number of items that are in the data 
source plus two. This is because the same event is also raised when the control creates its header and 
footer rows. You see how to distinguish between these rows inside an event handler in a later exercise. 

Finally, when thecridview is done creating and binding all the rows in the data source, it fires its 

DataBound event. 

On postback, the story looks quite different. When you click the button to cause a postback, the fol- 
lowing events are raised: 

GridViewl_RowCreated 
GridViewl_RowCreated 
GridViewl_RowCreated 
GridViewl_RowCreated 
Page_Load 
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Buttonl_Click 
Page_PreRenderComplete 


N otethat this list contains no RowDataBound or Dataeound events, and tlie EntityDatasource is 
also nowhere to be seen. Thecridview is able to reconstruct the entire control from View State, 
eliminating the need to access the database again. W hile getting the data from View State, the 
Gridview still needsto re-create each row in the grid, so you still see the Rowcreated events. Toward 
the end of thelistyou seethe page_Load event followed by the Button control's click event. It's 
important to understand and remember that user-triggered control events lil<e a Button control's 

Click or a SelectedlndexChanged Of a DropDownList OCCUr after the Load event Of the Page. N Ote 

that this Load event isn't the start of the page's life cycle. Before the Load event, the page is already 
instantiated and has fired its mit event. You could add a handler for this event to the code to con- 
firm this. 

At the end of the exercise, you clicl<ed a column header to sort the data in the grid. This time, the 
Gridview l<nows it must sort the data that is being displayed. It cannot do that itself, so instead it 
asl<s the EntityDatasource for a fresh copy of the data in the order the user requested. J ust as you 
did the first time the page loaded, you seethe various Rowcreated and DataBound events appear. 
W hat's interesting to see is that the sorting and sorted events fire after each other, and before the 
EntityDatasource gets its data. The reason for this is that thecridview doesn't handle the sorting 
here; it merely exposes the sorting parameters (the sort expression and the direction) to other con- 
trols. With an EntityDatasource, Sorting tal<es place at the database level, but it retrieves the sorting 
parameters from the Gridview. 

If you want to see other events at worl<, simply repeat steps 7 and 10 of the preceding exercise, setting 
up handlers for the various events. To seethe effect of View State, try disabling it either at the control 
level (for example, for thecridview) or at the page level. In Chapter 18 you learn a technique called 
tracing that enables you to find out this information for all controls in your page, including the time it 
tal<es to execute the various events. 


Although the preceding exercise is quite useless in a real-world application, it should help you gain 
an understanding of the various control events and the order in which they fire. You can use the 
exact same principles to hook into the page and mal<e modifications to the page itself, or to any of 
the controls in the page. In the next exercise you see how to change the appearance of rows in the 
data source, depending on the data that you are displaying. 

The ASP.NET Page Life Cycle and Events in Data Controls 

As previously discussed, thecridview raises its Rowcreated and RowDataBound eventsfor each row 
it adds to its output. These events are ideal to peek into the data and then, based on that data, take 
appropriate action. For example, you can use these events to verify whether a review that is being 
displayed is authorized. If it's not (meaning it won't be visible in the front-end website), you can 
change the review's appearance to draw attention to it. Another example of using events would be to 
hide or disable elements in the interface when it doesn't make sense for them to be visible or active. 
You see how to disable the Delete link in the Genres cridview in the next exercise. 
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TRY IT OUT 


Hooking into RowDataBound 


In this Try It Out you write an event liandler for tlie RowDataBound event of tliecridview control in 
the Genres page of the M anagement section. Within this event, you can diagnose the data item that is 
being bound to thecridview row, enabling you to see if the genre has reviews attached to it or not. If 
reviews are associated with the genre, you use some code to disablethe Delete linl< so users cannot acci- 
dentally try to delete that genre. 

1. Open the Genres, aspx page from the Management folder in M arkup View and locate the 
sqiDataSource control. Find the seiectcommand and modify the SQ L statement so it reads lil<e 
this: 

SelectCommand="SELECT Genre. Id, Genre. Name, Genre . SortOrder, 

COUNT (Review. Id) AS NumberOf Reviews FROM Genre LEFT OUTER JOIN Review 

ON Genre. Id = Review. Genreld GROUP BY Genre. Id, Genre. Name, Genre . SortOrder" 

You can type the entire SOL statement on a single line or breal< it up over multiple lines as I've 
done here. 

2. Switch to Design View and open the cridview control's Smart Tasks panel. Click the Refresh 
Schema link on the Smart Tasks panel and answer N o to the questions about regenerating fields 
and keys to maintain the current layout of the controls. 

Click Edit Columns on the Smart Tasks panel to bring up the Fields dialog box. Click the 
commandFieid item in the Selected Fields list and then click the blue link at the bottom right of 
the dialog box to convert the field to a xempiateFieid. This way the column is expanded into a 
template, which makes it easier to access the controls, such as the Delete link, it contains. Click 
OK to close the Fields dialog box. 

3. In M arkup View, locate the Delete link (theonewith its commandName set to Delete) and change 

its ID to DeleteLink: 

<asp : LinkButton ID="DeleteLink" runat="server" CausesValidation="False" 
CommandName=" Delete" Text = "Delete" ></asp : LinkButton> 

4. Switch to Design View, open the Properties Grid for thecridview, and switch to the Events tab. 
Set up an event handler for the RowDataBound event. 

5. Atthetop of the Code Behind of theWeb Form, add the following line of code: 


VB.NET 

Imports System. Data 
C# 

using System. Data; 

6. Inside the event handler that VS created for you, add the following code: 


VB.NET 

Protected Sub GridViewl_RowDataBound( sender As Object, 

e As GridViewRowEventArgs) Handles GridViewl . RowDataBound 
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Select Case e . Row . RowType 

Case DataControlRowType.DataRow 

Dim myRowView As DataRowView = CType (e . Row.Dataltem, DataRowView) 
If Convert. ToInt32 (myRowViewC'NumberOfReviews") ) > 0 Then 
Dim deleteLink As LinkButton = 

TryCast (e .Row. FindControl ( "DeleteLink" ) , LinkButton) 
If deleteLink IsNot Nothing Then 

deleteLink. Enabled = False 
End If 
End If 
End Select 
End Sub 

C# 

protected void GridViewl_RowDataBound (obj ect sender, GridViewRowEventArgs e) 
{ 

switch ( e . Row . RowType ) 
{ 

case DataControlRowType.DataRow: 

DataRowView myDataRowView = (DataRowView) e . Row. Dataltem; 
if (Convert .ToInt32 (myDataRowView [ "NumberOfReviews"] ) > 0) 
{ 

LinkButton deleteLink = e. Row. FindControl ("DeleteLink") as LinkButton; 

if (deleteLink != null) 

{ 

deleteLink. Enabled = false; 

} 

} 

break; 

} 

} 

7. Save changes to all open files and then request Genres, aspx in the browser. N otice how for genres 
that have reviews attached to them, the Delete linl< is now disabled, as shown in Figure 15-8. 
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How It Works 

Although short, this exercise demonstrates a powerful way to hool< into the different events of a control 
and change the presentation of the underlying control. To see how it worl<s, take a look at the modified 
SQL code first; 

SELECT 

Genre. Id, Genre. Name, Genre . SortOrder , COUNT (Review. Id) AS NumberOf Reviews 
FROM 

Genre LEFT OUTER JOIN 
Review ON Genre. Id = Review. Genreld 
GROUP BY 

Genre. Id, Genre. Name, Genre . SortOrder 


This modified SQL statement gets all the columns from 
the Genre table but introduces a new column, called 
NumberofReviews, which Contains the number of reviews 
associated with each genre. It does this by executing the SQL 
COUNT function against the id column of the Review table. 
The statement uses group by to group the selected rows into a 
set of summary rows by collapsing non-unique rows. Because 
the SQL statement is grouped on all unique columns in the 
Genre table, you get a unique row including the number of 
reviews for each genre row, whether or not reviews are associ- 
ated, as shown in Figure 15-9, which displays the result of this 
query in SSM S. 
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W hen this query is executed, thecridview in the markup of figure i5-9 
the page makes use of the first three columns, just as it did in 

the previous version of this page. But you can access the fourth column as well. You do this in the Code 
Behind, in the RowDataBound event to be exact, which fires for each row after theGridview is done 
binding the data for a specific row: 

VB.NET 

Protected Sub GridViewl_RowDataBound (sender As Object, 

e As GridViewRowEventArgs) Handles GridViewl . RowDataBound 
Select Case e.Row.RowType 

Case DataControlRowType.DataRow 

End Select 

End Sub 

C# 

protected void GridViewl_RowDataBound (object sender, GridViewRowEventArgs e) 
{ 

switch (e.Row.RowType) 
{ 

case DataControlRowType.DataRow: 

} 

} 
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T he RowDataBound event gets passed an instance of GridviewRowEventArgs, a class that provides infor- 
mation about the row and data that are being bound at this stage. 0 neof the properties of this class is 
the Row that represents the actual row that is being added to thecridview. This row in turn contains a 
RowType enumeration property that you can test to see what l<ind of row is being added. This enumera- 
tion contains six different members that map directly to the different types of rows thecridview can 
contain: DataRowfor normal and alternating rows, EmptyDataRowfor empty data rows, Header and 
Footer for the header and footer rows that are placed at the top and bottom, pager for the pager bar, 
and Separator for rows separating the data items in the grid. Because you need to change the appear- 
ance of an actual data row, the code in the case block only fires for normal and alternating rows. 

Inside the case blocl<, the following code is executed: 

VB.NET 

Dim myRowView As DataRowView = CType (e . Row . Dataltem, DataRowView) 
If Convert. ToInt32 {myRowViewC'NumberOfReviews") ) > 0 Then 
Dim deleteLink As LinkButton = 

TryCast (e.Row.FindControl ("DeleteLink") , LinkButton) 
If deleteLink IsNot Nothing Then 

deleteLink . Enabled = False 
End If 
End If 

C# 

DataRowView myDataRowView = (DataRowView) e . Row. Dataltem; 
if (Convert. ToInt32 (myDataRowView ["NumberOf Reviews" ] ) > 0) 
{ 

LinkButton deleteLink = e . Row. FindControl ( "DeleteLink" ) as LinkButton; 

if (deleteLink != null) 

{ 

deleteLink . Enabled = false; 

} 

} 

The Dataltem property contains a reference to the data item object that is being bound. W hen 

you are using a SqlOataSource control, theoataltem is presented as a DataRowView, a .N ET 

object that encapsulates a row returned from the database. The Dataltem is therefore cast to a 
DataRowView object and then it's indexed — using myRowview("Numberof Reviews") inVB.NET and 

myRowView ["NumberOf Reviews"] in C#— tO gettheCOUnt Of reviewsfrom the NumberOf Reviews Col- 
umn. If the count is larger than zero, it means reviews are associated with this genre and the Delete link 
must be disabled. Earlier you converted the commandFieid to a template field, which added an explicit 
declaration for the Delete link in your code: 

<asp : LinkButton ID="DeleteLink" runat="server" CausesValidation="False" 
CommandName=" Delete" Text = "Delete" ></asp : LinkButton> 

Using FindControl on the row that is being data bound, you can then get a reference to theDelete 
link, convert it to a proper LinkButton, and set its Enabled property to False. Because this code is 
also called when a row in the cridview is in Edit mode (by clicking the Edit link), you need to check 
if deleteLink is null (Nothing in VB.N ET) or not. In caseyouYe editing, the cridview row does not 
contain theoeieteLink (because the EdititemTempiate isactive, and not the itemTempiate) and 
therefore Findcontroi returns nuii. 


574 I CHAPTER 15 WORKING WITH DATA - ADVANCED TOPICS 


W hen you disable a LinkButton by setting Enabled to False as in tilis example, ASP.N ET applies a 

C SS class of aspNetDisabled: 

<a id="cpMainContent_GridViewl_DeleteLink_0 " class =" aspNetDisabled" >Delete</a> 

You can then style this disabled linl< with the CSS class (which you find in Management . ess that you 
added earlier) and give it a gray color: 

a . aspNetDisabled 
{ 

color : #CCC; 

} 


W ith this code, you can easily prevent errors that may occur when you try to delete a genre that has 
associated reviews. H owever, you may not always be able to prevent an error from occurring during 
a CRU D operation against a data source control. For example, you may try to delete a genre that 
initially didn't have any reviews attached. But imagine that right before you try to delete the genre, 
somebody else inserts a new review for it. When you then try to delete the genre you'll get an error 
because the genre is now linl<ed to a review. In such cases, thedata source controls enable you to 
diagnose the error that occurred and then tal<e the necessary measures, lil<e providing feedback to 
the users informing them that their CRU D operation didn't succeed. 


Handling Errors That Occur in tlie Data Source Controls 

in Chapter 18 you see a lot more about recognizing and handling errors that occur in your ASP 
.N ET pages. That chapter demonstrates how to catch errors that may occur in your code, and then 
handle them by logging them or by informing the user. But because thedata source controls expose 
error information as well, it's interesting to lool< at data access errors in this chapter. 

Both the EntityDatasource and the sqiDatasource controls give you information about 
errors (exceptions in .N ET parlance) that may occur during one of the four CRUD opera- 
tions. With the EntityDatasource, the three events that occur after the database has been 
updated (inserted. Updated, and Deleted) all provide access to an instance of a class 

called EntityDataSourceChangedEventArgs, WhereaS the Selected event gets paSSed an 
EntityDataSourceSelectedEventArgs. With the SqlDataSource COntrol, all fOUr eventS aCCept 

an instance of sqiDatasourcestatusEventArgs. Figure 15-10 shows these three EventArgs classes 
and their properties. 
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FIGURE 15-10 


Handling Events | 575 


These classes share two important properties: Exception and ExceptionHandied. The first con- 
tains the actuai exception that occurred or Nothing (in VB.N ET) or nuii (in C#) when everything 
goes according to plan and no error occurs. You can examine this error and tal<e appropriate action. 
For example, you can inform the user that something went terribly wrong, or you can send an 
e-mail to the site's webmaster informing her about the error so appropriate follow-up action can be 
tal<en. 

If you decide to handle the error in the event handler of the data source control, you should set the 
ExceptionHandied property of the object to True. This signals to the ASP.N ET run time that you 
are aware of the exception and have dealt with it adequately. If you omit setting this property, the 
run time forwards the exception, which is eventually displayed to the user. 

In thefollowing exercise, you see how to makeuseof the sqiDatasourcestatusEventArgs classin 
the Genres .aspx page. Rest assured, you can apply the exact same principles from this section to 
events that are raised by the Entityoatasource control as well. 


TRY IT OUT 


Handling Errors when Deleting Rows 


In thisTry ItOutyou see how to deal with exceptions that occur in a cridview when deleting rows. 
You'll temporarily comment out the code that disables the Delete 11 nl< so you can try to delete genres 
with associated reviews. The code then displays an error message when a user tries to delete a genre 
that still has reviews attached to it. Thisexercise mainly serves to demonstrate how to handleexcep- 
tions that may be thrown by the data source controls. From an end user's perspective, disabling the 
Delete linl< when it's not appropriate, as you did in an earlier exercise, should take care of the problem 
in most circumstances, but someone else could still insert a new review before you try to delete a genre. 
The best way to handle this is to combine both solutions: You disable links that are not available, and 
handle an error gracefully in case someone else has created a review for a genre you just tried to delete. 

1. 0 pen Genres . aspx from the Management folder. 

2. Switch to Design View and from theToolbox drag a Label control onto theGridview. This places 
the Label that Will hold an error message above the cridview. Change thelD of the Label to 
ErrorMessage and dear its Text property. (Right-click the Text property label in the Properties 
Grid and choose Reset. This removes the entire Text property and its value from the control's 

markup.) Set its CssClass to ErrorMessage. Finally, Set itS EnableViewState property tO false 

to ensure the label doesn't maintain its text after postbacks. You should end up with this code: 

<asp:Label ID="ErrorMessage" runat=" server" CssClass="ErrorMessage" 
EnableViewState= " false " x/asp : Label > 

<asp:GridView ID="GridViewl" runat= " server " AllowPaging="True" 

3. Open the Management. CSS file from the Management theme folder and add thefollowing rule set: 

. ErrorMessage 
{ 

color: Red; 
font-weight: bold; 

} 

4. Switch back to Genres. aspx, make sure the page is in Design View, and click the sqiDatasource 
control once to select it. Then open its Properties Grid, switch to the Events tab, and set up an 
event handler for the Deleted event by double-clicking the event name in the list of events. 
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5. At the top of the Code Behind, add the following namespace to bring the sqiException class into 
scope: 

VB.NET 

Imports System. Data . SqlClient 
C# 

using System. Data . SqlClient ; 

6. Inside the event handler that VS added for you in step 4, write the following code: 

VB.NET 

Protected Sub SqlDataSourcel_Deleted (sender As Object, 

e As SqlDataSourceStatusEventArgs) Handles SqlDataSourcel . Deleted 
If e. Exception IsNot Nothing AndAlso TypeOf (e. Exception) Is SqiException Then 
Dim myException As SqiException = CType (e. Exception, SqiException) 
If myException. Number = 547 Then 

ErrorMessage.Text = "Sorry, you can't delete this genre because " & 
"it has associated reviews that you need to delete first." 
e.ExceptionHandled = True 
End If 
End If 
End Sub 

C# 

protected void SqlDataSourcel_Deleted {obj ect sender, 

SqlDataSourceStatusEventArgs e) 

{ 

if (e. Exception != null && e. Exception is SqiException) 
{ 

SqiException myException = (SqiException) e .Exception; 

if (myException. Number == 547) 

{ 

ErrorMessage.Text = @"Sorry, you can't delete this genre because 

it has associated reviews that you need to delete first."; 
e.ExceptionHandled = true; 

} 

} 

} 

7. Comment out the code that you added in the previous Try It Out to stop the Delete linl< from being 
disabled. For this exercise it's enough to just comment out the line that disables the linl<: 

VB.NET 

' deleteLink . Enabled = False 
C# 

// deleteLink. Enabled = false; 


If you wanted to remove thisfunctionality completely, you could remove the entire event handler. 
In that case, don't forget to remove the handler from the cridview's marl<up in C#as well. 
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8. Save all your changes and then pressCtrl4f 5 to open Genres. aspx in your browser. Try deleting 
a genre that you l<now has associated reviews, such as Rap and H ip-H op. Instead of deleting the 
genre, the ASPX page now presents you with the error that is displayed above the Gridview in 
Figure 15-11. 
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FIGURE 15-11 

If the error message doesn't appear in red, press Ctrl-ff 5 to force a fresh copy of the M anagement 
theme's style sheet. 

9. Click the M anage Reviews menu item in the M anagement menu and then select the Rap and H ip- 
H op genre from the drop-down list. Delete the reviews in the genre, or edit them and reassign them 
to a different genre. 

10. Go back to Genres .aspx and try deleting the Rap and H ip-H op genre again. This time the genre is 
successfully deleted from the database. 

11. To seethe error you would get without this error handling, comment out the line in the Code 
Behind that sets ExceptionHandied to True. Save your changes, open the page again in your 
browser, and try to delete a genre with reviews. You'll get a detailed ASP.N ET error instead, 
shown in Figure 15-12. 
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N otice how this error is aimost identicai to the one you got near the end of Chapter 12 when 
you tried to deiete a genre manuaiiy. Don't forget to enabie both iines you commented out in this 
exercise when you're done, so linl<s are disabled when appropriate and you still get a friendly error 
message when the genre can't be deleted. 

How It Works 

W hen you clicl< the Delete I inl< in thecridview visible in Figure 15-11, thecridview triggers the 
Delete Command on the associated sqiDatasource control. As you have seen in previous chapters, 
this control tries to send a delete statement to the database. T he database then tries to delete the 
requested genre from the database, but finds out that it can't because the genre has related reviews.This 
results in a foreign key constraint error, which means the genre cannot be deleted because its ID is used 
as a foreign l<ey in another table. 

This foreign key constraint error is then returned from the database and eventually ends up in the 
Exception property of thee argument of the sqiDatasourcei_Deieted handler. The code then checks 
if there was an error (e. Exception is not Nothing/nuii) and checks the type of the exception to find 
out whether it's a sqiException; 

VB.NET 

If e. Exception IsNot Nothing AndAlso _ 

TypeOf (e . Exception) Is SqiException Then 

End If 
C# 

if (e. Exception != null && e. Exception is SqiException) 
{ 

} 

W hen you are working with a SQL Server database, as is the case in the Planet Wrox example, 
the errors thrown by the database are of type sqiException from the system. Data . sqiciient 
namespace that you imported in this exercise. This enables you to clearly separate database errors from 
other errors. 

When SQL Server throws an error, it also passes an error number, which is stored in the Number prop- 
erty of the exception. To access that number, you need to cast the exception to a true sqiException, 
which you do with this code: 

VB.NET 

Dim myException As SqiException = CType (e . Exception, SqiException) 
C# 

SqiException myException = (SqiException) e . Exception; 

Finally, the code checks the Number property. W hen it is 547, it means that SQL Server threw a foreign 
key constraint error to indicate you cannot delete a genre because it still has associated reviews. W hen 
this is the case, the Label control's Text property is set, and finally the code sets e.ExceptionHandied 
to True. This tells the ASP. N ET run time that the error has been dealt with, so the user won't get a 
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nasty error page, but a nice and friendly error message at tlietop of tliecridview instead. N ote tliat for 
aii otiier types of exceptions, tlie user stiii getstliedefauitASP.NET error message screen, aiso caiied 
tlieYeiiow Screen of Deatli. Cliapter 18 teacliesyou sometecliniquesto iog tine error in a centrai loca- 
tion and present tlie user witli a friendly, human-readable error page instead. 

The number 547 seems to be arbitrarily chosen, but it's the number that SQL Server returns for a for- 
eign l<ey constraint exception. In Chapter 18, which deals with debugging, you learn a few tricl<s that 
enableyou to look into the exceptions that are thrown so you can diagnose the Number property for 
different kinds of exceptions. 


In the past few chapters you have seen many examples of accessing a database using one of the built- 
in data controls like sqioatasource and EntityDatasource. Useful and quick to use as they are, 
they are not suitable for every situation. In cases where they don't fit, you can always hand-code 
your pages, as you see how to do next. 

HAND-CODING DATA ACCESS CODE 

The biggest issue! often have with the data controls istheamount of markup that they require. 
Although, for example, theListview generates most of the code for you, you still end up with a 
lot of code in the page. This makes it cumbersome and time-consuming to make a lot of modifica- 
tions to thiscontrol. Another issuewith these controls is that often you find yourself defining almost 
identical markup twice: once for an Insert template and once for an Edit template. The final issue I 
often encounter when working with the data controls is that I do not have complete control over the 
markup they create. This can make it difficult sometimes to create fancy and complex pages with 
multiple levels of bound drop-down controls, AJAX updatePanei controls, image uploads, and 
more. To overcome these issues, you can hand-codeyour pages, which gives you full control over the 
markup in thepageand thecodein theCode Behind. 

H and-coding isn't as difficult as it seems and you do get a lot of flexibility in return for the extra 
effort. Though the actual process differs from page to page, here's a general description of the steps 
you need to carry out to hand-code an Add/Edit page that enables you to enter a new or update an 
existing item in the database with the same markup; 

>■ Create the user interface by adding a number of controls, such as Texteox and 
DropDownList, to a page that enables users to enter new and update existing data. 

>- Add validation controls to the page so users are forced to enter valid data. 

>- In the Code Behind, figure out whether you're creating a new or editing an existing item. You 
can make the distinction by looking at the query string, for example. When you're editing an 
existing item, you get it from the data source and prepopulate the form controls. 

H andle the Save button to insert or update the item. When you're updating an existing item, 
you should get the item from the database first and then overwrite the existing values with 
the new ones from the form. Finally, save the items back to the data store. 

In the next Try It Out you build a page that implements this process. 
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NOTE In the next exercise, you hand-code the user interface and use the 
ADO.NET Entity Framework to handle all data access for you. It's also common 
to hand-code the interaction with the database using ADO.NET classes, such 
as classes that inherit from DbConnection, DbCommand, ond DbDataReader. 
Although hand-coding the interaction with the database requires a lot more 
code. It also gives you greater control and more flexibility. Get yourself a copy 
of Wrox's Professional ASP.NET 4.5 in C# and VB (ISBN: 978-1-118-31182-0) for a 
deeper dive into ADO.NET. 


||jmjy|2]^] Hand-Coding Data Access Pages 

In this exercise you createa new version of tlie AddEditReview.aspx page to rep! ace tlie existing one 
tliat currently usesa Detaiisview to handlethe insert and update process. In the new page you add 
form controls to enter the review's title, summary, body, and genre and whether or not it's authorized. 
In the Code Behind of the page you work with the pianetwroxEntities class to handleall data access 
code. To keep the exercise short you won't be adding any validation controls. H owever, with the knowl- 
edge you gained from Chapter 9, you know what to do to make this page accept valid data only. 

1. Start by adding a standard Web Form (don't use your custom template) using Code Behind to the 
Management folder of your Site and call it AddEditReviewHandcoded.aspx. Base the page on the 
M anagement master page and give it a meaningful title. 

2. Switch to Design View, chooseTableo Insert Table, and insert a table of six rows and two col- 
umns. Add controls to the cells of the HTML table and set their properties according to this table: 


ROW 

COLUMN 1 

COLUMN 2 

1 

Add a Label control 
Text: Title 

Add a TextBox control 
id: TitleText 
width: 450px 

2 

Add a Label control 
Text: Summary 

Add a TextBox control 
id: SummaryText 
width: 450px 
TextMode: Multiline 

3 

Add a Label control 
Text: Body 

Add a TextBox control 
id: BodyText 
width: 450px 
TextMode: Multiline 

4 

Add a Label control 
Text: Genre 

Add a DropDownList control 
id: Genrelist 
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ROW 

COLUMN 1 

COLUMN 2 

5 

Add a Label control 

Add a checkBox control 


Text: Authorized 

id: Authorized 

6 

Leave this cell empty 

Add a Button control 


id: SaveButton 
Text: Save 


W hen you're done, your page looks similar to Figure 15-13. 


AddEditReviewHandCoded.aspx* -0 X 


. . yMasterPages/Management . master 


cpMainContent (Custom) [ 


Title 

Summary 


Body 

Genre | Unbound ▼[ 

Authorized F [Authorized] 
Save! 


1 


B Design o Split <■ Source | [7| <aspiContent#Content2> |<br>| 


FIGURE 15-13 


3. N ext, hool< up theDropDownList to a new EntityDatasource cohtrol. You shoulcl bind it to 
the Genres entity set and use id and Name as the Datavaiuepieid and DataTextFieid proper- 
ties, respectively. If you don't see the Name and id properties listed in the drop-down lists for 
DatavaiueFieid and DataTextFieid, remember you cah clicl< the Refresh Schema linl<. Refer 
to the previous chapter if you're not sure how to hool< up the control to an EntityDatasource. 
When you're done, the code for the two controls lool<s lil<ethis: 

<asp:DropDownLlst ID= "GenreLlst " runat="server" DataSourceID="EntltyDataSourcel" 
DataTextFleld= "Name " DataValueFleld= " Id" >< /asp : DropDownLlst > 

<asp : EntityDatasource ID="EntityDataSourcel" runat=" server" 
Connec t i onS t r ing= " name = P 1 ane tWroxEnt 1 1 1 e s " 

Def aultContainerName= " Plane tWroxEntl ties" EnableFlattening=" False" 
EntitySetName=" Genres " x/asp : EntityDataSource> 

4. The next step is to write some code that gets an existing Review from the database in case the user 
is editing an item. The page assumes you are editing an item when the query string contains the 
item's ID. If it doesn't, it assumes you are creating a new review. 

To set up the code, double-clicl< the gray and read-only area of the page in Design View to set up 
a handler for the page's Load event, add an imports/using statement at the top of the page for 
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the pianetwroxModei naiTiespace, and then add the following bold code. Don't forget the _id 
variable outside page_Load but inside the class definition. 

VB.NET 

Imports PianetwroxModei 

Partial Class Management_AddEditReviewHandCoded 
Inherits System. Web .UI . Page 

Dim _id As Integer = -1 

Protected Sub Page_Load {sender As Object, e As EventArgs) Handles Me. Load 
If Not String. IsNullOrEmpty (Request .Query-String. Get ( "Id" ) ) Then 

_id = Convert .ToInt32 (Request .QueryString. Get ( "Id" ) ) 
End If 

If Not Page. IsPostBack And _id > -1 Then 

Using myEntities As New PlanetWroxEntities () 
Dim review = (From r In myEntities .Reviews 
Where r.Id = _id 
Select r) .SingleOrDefault 0 

If review IsNot Nothing Then 
TitleText.Text = review. Title 
SummaryText . Text = review. Summary 
BodyText.Text = review. Body 
Genr eLi s t . DataBind ( ) 
Dim myltem As Listltem = 

GenreList . Items . FindByValue ( review. Genreld.ToString () ) 
If myltem IsNot Nothing Then 

myltem. Selected = True 
End If 

Authorized. Checked = review. Authorized 
End If 
End Using 
End If 

End Sub 
End Class 

C# 

using PianetwroxModei; 

public partial class Management_AddEditReviewHandCoded : System. Web. UI . Page 
{ 

int _id = -1; 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

if ( ! string. IsNullOrEmpty (Request .QueryString. Get ( "Id" ) ) ) 
{ 

_id = Convert .ToInt32 (Request .QueryString. Get ("Id") ) ; 

} 

if (! Page. IsPostBack && _id > -1) 
{ 

using (PlanetWroxEntities myEntities = new PlanetWroxEntities () ) 
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{ 

var review = (from r in myEntities . Reviews 

where r.Id == _id 

select r) .SingleOrDefault 0 ; 
if (review != null) 
{ 

TitleText.Text = review. Title; 
SuinmaryText . Text = review. Summary; 
BodyText . Text = review. Body; 
GenreList .DataBind ( ) ; 
Listltem myltem = 

GenreList . Items . FindByValue ( review. Genr eld. ToString ( ) ) ; 
if (myltem != null) 
{ 

myltem. Selected = true; 

} 

Authorized. Checked = review. Authorized; 

} 

} 

} 

} 

} 

If you don't feel like typing all this code, remember you can find a copy of it in the chapter 15 
folder of the source for this book that you can download from www.wrox.com. H owever, in real- 
world applications you typically need to type this code, so rather than copying and pasting it now, 
you're better off finding the most efficient way to enter code like this, letting Intel I i Sense do most 
of the work for you. 

5. Switch back to Design View and double-click the Save button to set up a handler for the Button 
control's ciick event. Then back in the Code Behind, add the following code to that handler: 

VB.NET 

Protected Sub SaveButton_Click (sender As Object, e As EventArgs) _ 
Handles SaveButton. Click 
Using myEntities As New PlanetWroxEntities () 
Dim myReview As Review 

If _id = -1 Then ' Insert new item 
myReview = New Review () 
myReview. CreateDateTime = DateTime.Now 
myReview. UpdateDateTime = myReview. CreateDateTime 
myEntities . AddToReviews (myReview) 
Else ' update existing item 

myReview = (From r In myEntities .Reviews 
Where r.Id = _id 
Select r).Single() 
myReview. UpdateDateTime = DateTime.Now 
End If 


myReview. Title = TitleText.Text 
myReview. Summary = SummaryText . Text 
myReview. Body = BodyText . Text 
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myReview. Genreld = Convert. ToInt32 (GenreList.SelectedValue) 
myReview. Authorized = Authorized. Checked 

myEntities . SaveChanges 0 
Response. Redirect ( "Reviews . aspx" ) 
End Using 

End Sub 

C# 

protected void SaveButton_Click (object sender, EventArgs e) 
{ 

using (PlanetWroxEntities myEntities = new PlanetWroxEntities () ) 
{ 

Review myReview; 

if (_id == -1) // Insert new item 
{ 

myReview = new Review {) ; 

myReview. CreateDateTime = DateTime.Now; 

myReview. UpdateDateTime = myReview. CreateDateTime; 

myEntities .AddToReviews (myReview) ; 

} 

else // update existing item 
{ 

myReview = (from r in myEntities .Reviews 

where r.Id == _id 

select r). Single 0; 
myReview. UpdateDateTime = DateTime.Now; 

} 

myReview. Title = TitleText.Text; 
myReview. Summary = SummaryText.Text; 
myReview. Body = BodyText . Text ; 

myReview. Genreld = Convert .ToInt32 (GenreList. SelectedValue) ; 
myReview. Authorized = Authorized. Checked; 

myEntities . SaveChanges ( ) ; 
Response .Redirect ( "Reviews . aspx") ; 

} 

} 

6. 0 pen the Reviews . aspx file from the Management folder and change the two occurrences 

of AddEditReview.aspxtO AddEditReviewHandCoded. aspx. YoU ShOUld find Onein the 

HyperLinkFieid for the Title and One in the Insert N ew Review link at the bottom. 

7. Save all pending changes by pressing Ctrl+Shift+S. Then right-click the 
AddEditReviewHandCoded. aspx page in the Solution Explorer and chooseView in Browser. You 
should see a screen that enables you to insert a new review, as shown in Figure 15-14, which shows 
the page in Opera 12. 

8. Enter a new review, choose a genre, and click the Save button. You're taken to the Reviews 
page again. Open your genre, locate your review, and click its title. You're taken to 
AddEditReviewHandCoded. aspx. Where all form controls should already be filled in, ready to be 
edited. 
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I Q) Planet Wrox • Manage... 

4- O *- [ ©Web i localhost49213/Management/AddEditReviewH3ndCoded.a5px 


I " Search with Google 


■ Management Home 
I Manage Genres 

, Manage Reviews Summary 
Body 

Genre 
Authorized 


I Pop 


FIGURE 15-14 


How It Works 

You actually coded quite a lot in this exercise and didn't use many of the ready-made controls, other 
than those to let the user enter some details and to create the list of genres. Although hand-coding 
often means more work, you do gain a lot of flexibility, and — when you do it right — you end up 
with a page that's a lot easier to maintain. In this example, the markup section of the page is much 
easier to maintain than the previous version that used a oetaiisview. Gone are the endless attri- 
butes on the controls, gone is the duplication that existed between the insertitemTempiate and the 
EdititemTempiate, and gone is the awkward codeto handle the updateoateTime in the Code Behind. 
W hat remains is a simple table-based presentation of the necessary form controls. Just like the Contact 
form you created in Chapter 9, it's easy to modify this page, add validation controls from Chapter 9, 
and use C SS to change the appearance of the page. 

N ext up is the code in the Code Behind. I'll discuss saving the form for a new review in the database 
first. After that I'll show you how to load an existing review from the database and prepopulatethe 
form. 

When you fill in the form's controls and click the Save button, the code in the saveButton_ciick 
method fires. This code first creates a new pianetwroxEntities object with a using block to enable 
you to interact with the database through EF. Then when the_id variable does not contain an ID of an 
existing review (you see how the ID is retrieved later), a new Review instance is created and added to 
the Reviews Collection of the entities object. This would be the case when you arecreating a brand new 
review using the Insert N ew Review link. 

VB.NET 

myReview = New Review ( ) 
myReview.CreateDateTime = DateTime.Now 
myReview. UpdateDateTime = myReview.CreateDateTime 
myEntities . AddToReviews (myReview) 

C# 

myReview = new Review () ; 
myReview.CreateDateTime = DateTime.Now; 
myReview. UpdateDateTime = myReview.CreateDateTime; 
myEntities .AddToReviews (myReview) ; 
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Because the review needs a createDateTime and an updateDateTime, this code sets both. N otice how 
theupdateDateTime isfilled With the CreateDateTime SO both Contain theexact samedateand time, 
indicating the item hasn't been modified yet. 

If the_id variable did contain a review ID (which means an existing review is being edited and saved), 
it's queried from the database with a LINQ to Entities query: 

VB.NET 

myReview = (From r In myEnti ties .Reviews 

Where r.Id = _id 

Select r) .Single () 
myReview. UpdateDateTime = DateTime.Now 

C# 

myReview = (from r in myEntities .Reviews 

where r.Id == _id 

select r ). Single 0; 
myReview. UpdateDateTime = DateTime.Now; 

W hether or not an ID was passed to this page, at this stage the myReview variable contains a 
Review instance. The remaining code then fills the review's properties by retrieving them from the 
relevant form controls. For the genre, the code directly assigns the cenreid property instead of 
querying a complete Genre instance and assigning it to the Genre property of the Review instance. 
This worl<s because the model has support for foreign l<ey columns, as you learned in the preceding 
chapter. 

Finally, when the object is fully set up, the code calls SaveChanges on the PlanetWroxEntitles 

object. This eventually sends a SQ L insert or update instruction to the database to tell it to insert 
a new or update the existing Review row. J ust as with the data source control, calling savechanges 
may throw an error. Chapter 18 digs deeper into handling errors that may occur in your code. After 

SaveChanges haS been Called, the user is redirected to the Reviews .aspx page using Response 
. Redirect! 

VB.NET 

myEntities . SaveChanges ( ) 
Response . Redirect ( "Reviews . aspx" ) 

C# 

myEntities . SaveChanges ( ) ; 
Response . Redirect ( "Reviews . aspx" ) ; 

Obviously, once you've saved a review in the database, you can edit it again. Once you clicl< one of the 
existing reviews in the reviews list at Reviews. aspx, you're tal<en to theAdd/Edit page with the ID 
of the review in the query string. For example, browsing to http://iocaihost :i04 9/Management/ 
AddEditReviewHandcoded.aspx?id=6 enables me to edit the D eath M agnetic album by M etallica. The 
page is able to detect the ID in the query string using this code in page_Load: 

VB.NET 

If Not String. IsNullOrEmpty (Request .QueryString. Get ( "Id" ) ) Then 

_id = Convert. ToInt32 (Request. QueryString. Get ("Id") ) 
End If 
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C# 

if ( ! string. IsNullOrEmpty (Request . QueryString. Get ( "Id" ) ) ) 
{ 

_id = Convert. ToInt32 {Request. QueryString. Get ("Id") ) ; 

} 

Because this _id variable is assigned a value in page_Load, it can be used to load an existing item 
to display in the form, but also to get the item from the database in the saveButton's click event 
(which you saw earlier). 

If there is an ID ( _id is assigned a value other than -i) and the page is not posted bacl<, the 
code sets up a new pianetwroxEntities instance inside a using block and queries the Review 
instance using the following LIN Q to Entities query: 

VB.NET 

Dim review = (From r In myEntities .Reviews 
Where r.Id = _id 
Select r) . SingleOrDef ault ( ) 

C# 

var review = (from r in myEntities .Reviews 
where r.Id == _id 
select r) . SingleOrDef ault 0 ; 

0 nee the Review instance is found in the database, its properties are used to prepopulate the form 
controls: 

VB.NET 

If review IsNot Nothing Then 
TitleText.Text = review. Title 
SummaryText . Text = review . Summary 
BodyText . Text = review. Body 
GenreList .DataBind () 

Dim myltem As Listltem = GenreList . Items . FindByValue (review . Genreld. ToString () ) 
If myltem IsNot Nothing Then 

myltem. Selected = True 
End If 

Authorized. Checked = review. Authorized 
End If 

C# 

if (review != null) 
{ 

TitleText.Text = review . Title ; 
SummaryText . Text = review. Summary ; 
BodyText . Text = review . Body , ■ 
GenreList .DataBind 0 ; 

Listltem myltem = GenreList . Items . FindByValue (review. Genreld. ToString ()) ; 

if (myltem != null) 

{ 

myltem. Selected = true; 

} 

Authorized. Checked = review. Authorized; 

} 
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The code checks to make sure review is not Nothing/nuii before it tries to access its properties. 
The chances of the review being nuii in this exampie are pretty smaii because you access the 
Add/Edit page by dicking an existing item in the Reviews page, so you can be pretty sure the item 
is there. H owever, this is not always the case, especially not in public-facing pages. Your clients 
may have a bookmark for a page with a specific ID in the query string. If you then delete that item 
from the database and your users access the page using the old bookmark, the review can't be 
found and a so-called N ull Reference exception occurs. 

The same defensive coding mechanism is used to preselect the genre in the drop-down list. In 
thiscaseyou can be sure the Genre still existsin the database because there's a relationship 
between the id column of the Genre table and the Genreid of the Review table. H owever, check- 
ing to make sure an item exists in a DropDownList control before you try to select it is a best 
practice and helps in avoiding other Null Reference exceptions. Because the DropDownList with 
genres hasn't been populated atthisstage, you need to call DataBindo first. This forces the 
EntityDatasource control to get the genres and add them to the DropDownList. Afterward, the 
code can successfully find and preselect the appropriate item. 

Finally, when you click the Save button for an edited item, the exact same code is fired that was 
used to insert a new item. 

If you were using validation controls (and you really should, as you learned in Chapter 9), 
you need to check whether or not the page is valid before you proceed with saving the Review 
instance: 

VB.NET 

Protected Sub SaveButton_Click (sender As Object, e As EventArgs) _ 
Handles SaveButton. Click 
If (Page.IsValid) Then 

Using myEntities As New PlanetWroxEntities { ) 

C# 

protected void SaveButton_Click (object sender, EventArgs e) 
{ 

if (Page.IsValid) 
{ 

using (PlanetWroxEntities myEntities = new PlanetWroxEntities 0 ) 

This is really all there is to adding and editing new reviews using your own code against the Entities 
Framework. I realize it may look a little funky at first because you need to reset your head, forget 
about smart controls and their many properties and events, and think in straight code. H owever, EF 
makes this pretty straightforward, and most of it comes down to querying entities, copying values 
from or to an object's properties, and calling savechanges to propagate the changes back to the 
database. 

Clearly, this is just the beginning. There's a whole lot more you can do once you start writing your own 
code, whether or not it targets EF. For more information, get yourself a copy of Programming E ntity 
Framework Second Edition byjulia Lerman or Professional ASP.N ET 4.5 in C#and VB from Wrox 
(ISBN : 978-1-118-31182-0). 
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In all the database examples you have seen so far, the code accesses the database for each and every 
request. Every timesomedata needsto bedisplayed, it's retrieved fresh from thedatabase. Clearly, 
this can be a waste of time and resources like network bandwidth and CPU cycles, especially if the 
data hasn't changed since the last time you accessed it. In the final section of thischapter, you are 
introduced to a technique called caching that can greatly improve the responsiveness and perfor- 
mance of your application. 


CACHING 

Caching is one of the best and often easiest 
ways to improve the performance of an appli- 
cation. It's also an option that is too often 
overlooked by developers. With caching, a 
copy of your data is stored in a location that 
can be accessed very quickly. The idea with 
caching is that fetching data from the cache 
should be faster than regenerating it or fetch- 
ing it from the original data source. Therefore, 
most caching solutions store data in memory, 
which is usually the fastest way to getthedata. 
The .N ET cache is no exception, and enables 
you to store frequently accessed data in a spe- 
cial location in the computer's memory. 

Typically, the caching principletakes the route 
displayed in Figure 15-15. 

The application queries for some data — for 
example, a list of genres from thedatabase. 
Instead of accessing the database directly. 


Request 
for data 



Get data from 
source and store it 
in tine cache 


Yes 


Return data from 
tine caclie 


Return data 


FIGURE 15-15 


the cache is examined to see if it already contains the requested data. If it does, the data is returned 
from the cache directly. If it's not stored in the cache yet, it is retrieved from the data source (such as 
a SQL Server database), a copy of the data isstored in thecachefor later retrieval, and finally, the 
data is returned to the calling code. 

Though caching is generally a great solution to improve your application, it has a few drawbacks 
that you need to beawareof. The following section explainsafew common pitfallsyou can run into 
when using caching. The section after that shows the different caching mechanisms you have avail- 
able in your ASP.N ET web applications. 


Common Pitfalls with Caching Data 

W hen working with cached data you typically encounter two common problem areas; 
>• You end up with stale — or out-of-date — data. 
>" You assume an item is present in the cache when it isn't. 
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I n the next sections you see how to avoid these two problems. 

Avoiding Stale Data 

Stale data is cached data that no longer matches its original source. For example, when you cache 
the results of a query for all the genres in the database and use that data instead of getting it fresh 
from the database, a new genre inserted by another user may go unnoticed. 

To avoid stale data you need a way to invalidate the cache. With cache invalidation, an item is 
removed from the cache so it can be re-created on the next request. To invalidate cached data, you 
have a number of options at your disposal. First of all, you can choose to set a short cache dura- 
tion. For example, you could cache the G en res list for, say, 10 minutes. If another user inserts a new 
genre during those 10 minutes, it won't show up in your pages. H owever, after 10 minutes, the list is 
removed from the cache and re-created with fresh data the next time it is requested. You see how to 
use time-based caching later. 

Another option to invalidate the cache is by using a cache dependency. With a cache dependency, 
you create a relationship between the cached item and the original data source. When the underly- 
ing data source changes, the cached item is invalidated so it can be re-created the next time it is 
requested. You see how to use the cacheDependency class later. 

You can also usea cache dependency when using a database lil<e M icrosoft SQL Server. This means 
that as soon as the data that is part of the cached query is changed, the cached item is invalidated. 
Database caching and invalidation isan advanced and broad subject. You find morein the chapter 
that deals with caching in Professional ASP.N ET 4.5 in C#and VB, published by Wrox (ISBN : 
978-1-118-31182-0). 

Don't Rely on the Data Being There 

To minimize memory consumption for an application, the caching mechanism in ASP.N ET auto- 
matically removes old and infrequently used itemsfrom the cache from time to time. Also, when the 
server isconsuming too much memory, items may be ejected from the cache as well. Therefore, you 
shouldn't rely on items being in the cache. They may have been removed by the cache itself when the 
ASP.N ET run time determined that the item was not used often enough and was thus tal<ing up pre- 
cious space unnecessarily. The entire cache is also cleared when the web application or web server 
restarts (which happens when you mal<e changes to the web.config file, for example). But items can 
also be removed because of their dependencies. Therefore, you should never rely on the item being 
in the cache, even if you set it there yourself earlier in the application's life cycle. Later in this chap- 
ter you see how to use the Cache API (application programming interface; the way you can interact 
with a program) to use the cache programmatically. 

Using the Cache A PI is not the only way to use the cache. The next section showsyou thedifferent 
ways of caching data in ASP.N ET. 

Different Ways to Cache Data in ASP.NET Web Applications 

You can deploy a few different caching strategies in your ASP.N ET applications, including out- 
put caching, caching with the built-in data source controls, and programmatic caching. All three 
options are discussed in the remainder of this chapter. 
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Output Caching 

With output caching, the end result of a rendered page is cached. This means that the very first time 
a page is requested, its final result is added to the cache. Subsequent requests to the same page result 
in the same H TM L being sent. This last sentence is important enough to be repeated: Subsequent 
requests to the same page result in the same HTML being sent. This means the page is not pro- 
cessed at the server again, and no custom code in the Code Behind will fire. The exact same HTML 
from the first request is simply returned on each subsequent request. 

Enabling output caching is extremely simple; just add an outputcache directive below your page 
directive, as shown in bold under this C#@ page directive (you use the same code if you're using 
VB.N ET, but your @ page directive may look slightly different): 

<%@ Page Title="About this Site" Language="C#" 

Mas terPageFile="~ /Mas terPages/ Front end. master" AutoEventWireup="true" 
CodeFile="Def ault . aspx. cs" Inherits="About_Default" %> 

<%@ Outputcache Duration="60" VaryByParam="None" %> 

The Duration is the number of seconds you want to cache the page before ASP. N ET creates a new 
copy of it. In the preceding example, the page is cached for a minute. 

The None value in the varyByParam attribute tell s .N ET to cache a single version of the page, no 
matter what query string values you pass to it. Although this is fine for relatively static pages 11 l<e 
the About page in the Planet Wrox site, this is typically not an ideal solution for dynamic pages. 
Imagine a dynamic page that shows the details for a review based on the query string that is being 
passed to the page. The first time you request the page you may browse to something lil<e: 

http: //localhost : 1234 5 /Reviews /ViewDetail s . aspx? Id=2 3 

ASP.N ET generates a page showing review 23 and then caches the entire output of the page. So 
what happens when you then request this page? 

http: //localhost : 12345/Reviews/ViewDetails . aspx?Id=33 

Instead of seeing the review with an ID of 33, you end up with the review with an ID of 23! To 
overcome this problem, ASP.N ET enables you to cache specific versions of a page. For example, you 
can instruct the page to cache a copy of the page for each unique query string field that it retrieves. 
You do this by setting the varyByParam attribute of the directive to a comma-separated list of pos- 
sible query string or form values. ASP.N ET will cache a copy of the page for each unique combi- 
nation of the fields it finds. As an example, consider a page that accepts the ID of a review in the 
query string and then displays its details. To cache a copy for each unique review, you add id to the 

VaryByParam attribute I i l<e this: 

<%@ Outputcache Duration="60" VaryByParam="Id" %> 

For a page showing the details of a specific review, this is perfect. For each unique review, ASP.N ET 
l<eeps a cached copy. This means that the database will only be hit when the review is not present in 
the cache. All other requests will be served from the cache. 

0 neof the problems with output caching is that it's often an all-or-nothing scenario. Although it's 
easy to cache different pages based on, for example, a query string value, you'll need to write custom 
code to handle other situations lil<e dealing with themes. When a page is requested and cached for 
the first time, the user's theme is tal<en into account. If subsequent users have a different theme set 
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they still seethe page in the originally requested theme. Another case where output caching can be 
problematic is when you're using security-related controls such as the Loginview (discussed in the 
next chapter). These controls can display content based on the currently logged-in user. If that page 
is cached, other users will seethe content that belongs to the first user that requested the page. 

One solution to this problem is to not use output caching at the page level and move content that 
applies to all users to a separate user control, which you then embed in the page as you saw how 
to do with the Contact Form. For example, a list with news articles or the full list of reviews could 
be the same for all users. If you move the code for these lists to a user control with output caching 
enabled, your containing page is still created separately for each user, but the content from the user 
control is only generated thefirst time, and then reused for all subsequent requests. 

Another solution is to instruct the data source controls to cache data for you, as you see in the next 
section. 

If you're not affected by the drawbacl<s of output caching (such as when you're not using themes or 
the security-related controls), output caching is an excellent mechanism to improve the performance 
of your site. 

Caching with Data Source Controls 

The biggest benefit of caching with the data source controls is that they only cache dynamic, data- 
base-driven data, and not the entire page. That enables you to keep other parts of the page dynamic, 
such as a banner module or a personalized greeting welcoming the user. Caching is supported by 

design on most of the data source controls, except for the SiteMapDataSource, LinqDataSource, 
and EntityDataSource COntrolS. 

Caching with the data source controls is very easy: All you need to do is set theEnabiecaching 
property and then specify a cacheDuration. The following code snippet shows a sqioatasource 
control that caches its data for 10 minutes: 

<asp : SqlDataSource ID="SqlDataSourcel" runat=" server" CacheDuration="600" 
EnableCaching="True" ></asp : SqlDataSource > 

W hat's cool about caching with the data source controls is that they are smart enough to see if 
you are making updates to the underlying data. So, when you have set up a sqioatasource con- 
trol to cache data for the seiectcommand for 20 minutes, but then make a change to the data by 
using the msertcommand, updatecommand, or Deietecommand, the cache is invalidated automati- 
cally. This only works when you execute the insert, update, or delete command against the exact 
same sqiDatasource. If you have One page that displays and caches a list with reviews (such as 
All .aspx, for example) and then have another page that is used to insert a new review (such as 
AddEditReview.aspx in the Management folder), this won't work. After you have inserted a new 
review in the M anagement section of the site, it won't show up in aii .aspx until the cache has 
expired. 

Code-free caching with the data source controls is useful in many situations. H owever, the data 
source controls cannot be used in every situation. W hat if you want to cache the results of data you 
get from a completely different source? W hat if you want to cache data you receive in a hand-coded 
page targeting the Entity Framework, or the contents of a text or an X M L file that you frequently 
need to access? For those cases, ASP.N ET gives you programmatic access to the cache. 
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Programmatic Caching 

With programmatic cacliing, you can store items in tlie caclie tlirougli VB.N ET or C#cocle. 
Obviousiy, you can aiso access tliem again iater. To store items, you use tine Add or tlie insert 
metliod or you index tlie cache collection directly. The Add method is quite powerful (and complex) 
and enables you to specify a host of options that determine how long the item is cached, what prior- 
ity it should have compared to other cached items, and what factors trigger the item's removal from 
the cache. 

The Insert method, on the other hand, is much easier. It has a few short overloads that enable 
you to specify the cached item and associate it with a specific l<ey. Another overload also enables 
you to define dependencies that can be used to invalidate a cached item when the original source is 
changed. This is great for caching files that don't change very often. You can read a file from disl<, 
and store it in the cache with a dependency on the original file. You then l<eep reading the file from 
the cache instead of from disl<. W hen thefileon disl< is changed, the cached item is invalidated 
automatically and you can read the original source file again and store it in the cache. The following 
example shows how to modify thecontactporm.ascx user control to store and get the item from 
the cache until it changes: 

VB.NET 

If Page.IsValid Then 

Dim mailBody As String = TryCast (Cache ("ContactFormMailBody") , String) 
If String. IsNullOrEmpty (mailBody) Then 

Dim fileName As String = Server. MapPath("~/App _ Data/ContactForm.txt") 
mailBody = System. 10. File. ReadAllText(fileName) 

Cache. InsertC'ContactFormMailBody", mailBody, New CacheDependency (fileName)) 
End If 

mailBody = mailBody.Replace("##Name##", Name. Text) 

End If 
C# 

if (Page.IsValid) 
{ 

string mailBody = Cache ["ContactFormMailBody"] as string; 

if (string. IsNullOrEmpty (mailBody) ) 

{ 

string fileName = Server. iyiapPath("~/App _ Data/ContactForm.txt") ; 
mailBody = System. 10. File. ReadAllText(fileName) ; 

Cache. Insert("ContactFormMailBody", mailBody, new CacheDependency(fileName)); 

} 

mailBody = mailBody.Replace ("##Name##", Name. Text); 
} "' 

N Otice how a new CacheDependency (for Which yOU need to bring the system. Web. caching 

namespace into scope with an imports/using statement) is created and passed to the insert 
method. This CacheDependency expects the name of the file it is dependent on. As soon as you 
change the file on disl< (using VS or N otepad, for example), ASP.N ET removes the item from the 
cache so it will be read from the original source file again the next time this code is executed. 
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You remove items from the cache using the Remove method that accepts the i<ey of the cached item. 
You define this i<ey when inserting the item, using either Add or insert. 

To access the items in the cache, you have a few options available. First of all, you can access the 
Cache collection directly: 

VB.NET 

myReview = TryCast (Cache (myfCey) , Review) 
C# 

Review myReview = Cache [myKey] as Review; 

H ere, the cache collection is indexed using the key stored in the myKey variable. 
Additionally, you can use the Get method that expects the l<ey: 

VB.NET 

myReview = TryCast (Cache . Get (myJCey) , Review) 
C# 

myReview = Cache . Get (myiCey) as Review; 

Because Get is a method, theC#examplenow also uses parentheses around the cache l<ey, making 
both examples look more like each other. 

Finally, you can access items in the cache using the item property that also accepts the key of the 
cached item. 

All three ways to access items in the cache always return an object or Nothing/nuii when the item 
cannot be found. That means that if you know the type you aregetting back from the cache, you 
should cast it to the appropriate type using TryCast in V B.N ET or the as keyword in C# before you 
can use its properties. The previous two examples show you how the item from the cache is cast to a 
strongly typed Review object first. 

To give you an idea of how to use the cache programmatically, the next exercise shows you how to 
insert a review in the cache, so you don't have to get it from the database every time you need it. 


UJym;]^] Using the Cache API 

In this Try It Out exercise you see how to cache a Review instance you get from EF using a LIN Q to 
Entities query so it can be retrieved later by its key (which contains the review's ID). 

1. Start by adding a new page called viewDetaiis.aspx in the Reviews folder of your web applica- 
tion. M ake sure it's based on your custom template. There's no need to set an explicit title, because 
itwill beset programmatically. Instead, remove the Titie="" attribute from the Page directive. 
There's a funny and old bug in ASP.N ET that causes programmatic modifications to the page's 
Title not to stick when this attribute is set to an empty string in M arkup View. 

2. In M arkup View, add three Label controls to the cpMaincontent content placeholder and name 
the controls as follows: 


TitleLabel 
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SummaryLabel 
BodyLabel 

Delete the Text attribute and itsvaluefrom all threelabels. 

3. W rap the TitieLabei label in an <hi> element, and set the cssciass property of the 

SummaryLabel COntrol tO Summary. YoU ShOUld end Up With thiSCOde: 

<hl><asp : Label ID=" TitieLabei " runat=" server" ></asp : Label >< /hi > 

<asp:Label CssClass=" Summary" ID=" SummaryLabel" runat="server" ></asp :Label> 

<asp:Label ID=" BodyLabel" runat="server"></asp:Label> 

4. Switch to Design View and double-click the read-only area of the page to set up a handler for 

Page_Load. 

5. Add an imports/using Statement at the top of the page for the pianetwroxModei namespace as 
you'vedone before in AddEditReviewHandcoded.aspx, and then add the following code to the 
page_Load event handler that has been created for you: 

VB.NET 

Protected Sub Page_Load{ sender As Object, e As EventArgs) Handles Me. Load 

Dim reviewld As Integer = Convert .ToInt32 (Request .QueryString. Get ( "Reviewld" ) ) 
Dim cacheKey As String = "Reviews" + reviewld. ToString () 
Dim myReview As Review = TryCast (Cache (cacheKey) , Review) 
If myReview Is Nothing Then 

Using myEntities As New PlanetWroxEntities () 
myReview = (From r In myEntities. Reviews 
Where r.Id = reviewld 
Select r) . SingleOrDef ault 0 
If myReview IsNot Nothing Then 

Cache. Insert (cacheKey, myReview, Nothing, DateTime.Now.AddMinutes (20) , 
Sys tem. Web. Caching. Cache .NoSlidingExpirat ion) 

End If 
End Using 
End If 

If myReview IsNot Nothing Then 

TitieLabei .Text = myReview. Title 

SummaryLabel. Text = myReview. Summary 

BodyLabel . Text = myReview. Body 

Title = myReview. Title 

MetaDescription = myReview. Summary 
End If 
End Sub 

C# 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

int reviewld = Convert.ToInt32 (Request.QueryString.Get ("Reviewld") ) ; 

string cacheKey = "Reviews" + reviewld. ToStringO ; 

Review myReview = Cache [cacheKey] as Review; 

if (myReview == null) 

{ 

using (PlanetWroxEntities myEntities = new PlanetWroxEntities () ) 
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{ 

myReview = (from r in myEntities .Reviews 
where r.Id == reviewld 
select r) .SingleOrDefault 0 ; 

if (myReview != null) 
{ 

Cache . Insert (cacheKey, myReview, null, DateTime.Now.AddMinutes (20) , 
System .Web . Caching . Cache . NoSlidingExpiration) ; 

} 

} 

} 

if (myReview != null) 
{ 

TitleLabel .Text = myReview. Title; 
SummaryLabel . Text = myReview. Summary; 
BodyLabel .Text = myReview. Body; 
Title = myReview. Title; 
MetaDescription = myReview. Summary; 

} 

) 

6. Open the page All .aspx from the Reviews folder and delete the Gridview that you created in the 
previous chapter. Replace it with a simple Repeater control that contains a single HyperLink into 
your new details page: 

<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" runat=" Server "> 
<asp:Repeater ID="Repeaterl" runat=" server" ItemType="PlanetWroxModel .Review" > 
<ItemTemplate> 

<asp: HyperLink ID="HyperLinkl" runat="server" 

NavigateUrl= ' <%# "ViewDetails .aspx?ReviewId=" + Item. Id.ToString () %>' 
Text='<%# Item. Title %> ' ></asp:HyperLink> 
</ItemTemplate> 

<SeparatorTemplate><br / ></SeparatorTemplate> 
</asp:Repeater> 

</asp : Content > 

7. Switch to the Code Behind of the page and replace the last two calls that used the cridview so 
they end up using the Repeater control instead: 

VB.NET 

Repeaterl .DataSource = allReviews 
Repeaterl . DataBind ( ) 

C# 

Repeaterl .DataSource = allReviews; 
Repeaterl . DataBind ( ) ; 

8. Add the following CSS declaration to the end of the CSS files for the M onochrome and the 
DarkGrey themes. Since this is a front-end page visited by your users, you don't need to add it to 
the M anagement theme: 


. Summary 
{ 


Caching | 597 


font-style: italic- 
display: block; 

} 

9. Save all changes and then request aii . aspx from the Reviews folder In your browser. Click the 
title of a review and you're taken to viewDetaiis .aspx with thelD of the requested review In the 
query string. 


COMMON MISTAKES If you see an error message about an invalid page title, 
make sure you removed Titie=" " from the Page directive in viewDetaiis 
. aspx. Witli the attribute set to an empty string, the title you set in Code Behind 
won't stick, and then your BasePage will raise an exception because the title is 
missing. 


You should now seethe details of the review displayed on the page. Press Ctrl4f 5 or Ctrl+R to 
refresh the contents of the page. Although you don't see the difference, the review now comes 
from the cache. If you want to confirm this Is really the case, you can add a Label control to the 
ViewDetaiis. aspx page and then update It with a text saying whether or not the Item was In the 
cache: 

VB.NET 

Labell.Text = "In the cache" 

If myReview Is Nothing Then 

Labell.Text = "NOT in the cache" 

Using myEntities As New PlanetWroxEntities { ) 

C# 

Labell.Text = "In the cache"; 

if (myReview == null) 
{ 

Labell.Text = "NOT in the cache"; 

using (PlanetWroxEntities myEntities = new PlanetWroxEntities () ) 

Thiscodelnltlally setstheLabei'SText to "in the cache". H owever. If the Item Isn't found, 
the Label Is Updated to reflect that observation. 


COMMON MISTAKES If you get the error "Page title cannot be 'Untitled Page' 
or an empty string", make sure you're passing a valid Review ID in the Reviewid 
query string parameter to the viewDetaiis . aspx page. You usually get this 
error when you browse to the details page directly from within VS using Ctrl+F5 
rather than through All . aspx. To work around this situation, you could add code 
to ViewDetaiis . apsx that redirects the user back to All . aspx when there's not 
valid value in the Reviewid query string parameter, which you could check using 
string . IsNullOrEmpty (Request . QueryString . Get ( "Reviewid" ) . For Other 
unforeseen situations you need to add error-handling code to your page. This is 
the topic of Chapter 18. 
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How It Works 

In the viewDetaiis.aspx pageyou first added a few labels that hold relevant properties of the Review, 
such as its Title, Summary, and Body. You assigned the Label control for the summary a cssciass so 
you can influence its styling from your CSS files. The .summary selector assigns an italic font and sets 
the display property to block, forcing the body text that follows onto its own line. 

The code in the Code Behind then starts by looking at whether or not it can retrieve the item from the 
cache: 

VB.NET 

Dim myReview As Review = TryCast (Cache ( "Reviews" + reviewld. ToString ( ) ) , Review) 
C# 

Review myReview = Cache ["Reviews" + reviewld. ToString () ] as Review; 

As the l<ey for the cached item, the code uses a combination of the word Reviews and the id of each 
item. This gives each review a unique l<ey to be used for the cache. If the item cannot be found in the 
cache (possibly because you're loading the pagefor the first timeor becauseASP.N ET removed it), 
the TryCast method in VB.N ET and the as l<eyword in C# return Nothing/nuii. So, by checl<ing the 
myReview Variable for that value, you can determine whether the item was in the cache. If it was, you're 
pretty much done, but if it wasn't you need to get it from the database using a LIN Q to Entities query 
similar to those you've seen before. N ote that the query uses the singieorDefauit o operator to limit 
the query to a single Review instance, because there should only be one by the given ID, or to Nothing/ 
null when the item cannot be found. W hat you do when the item is not found is up to you; you can 
display an error message in a Label control informing the user that the item is no longer available, or 
you can redirect to the homepage or another page in your site. 

After the item is retrieved from thedatabase, it's inserted into thecache with thefollowing code: 

VB.NET 

Cache . Insert { "Reviews" + reviewld. ToString {) , myReview, Nothing, 

DateTime .Now. AddMinutes (20) , System. Web . Caching . Cache .NoSlidingExpiration) 

C# 

Cache . Insert ( "Reviews" + reviewld. ToString () , myReview, null, 

DateTime .Now. AddMinutes (2 0) , System. Web . Caching . Cache .NoSlidingExpiration) ; 

The first parameter of the insert method is the cache l<ey and the second parameter is the object you 
want to cache: the actual Review instance, in this case. The third parameter enables you to hook up 
your cached item to some dependency, such as a file or a database, so the item is removed from the 
cache when the dependent object changes. This is not used in this example, so nuii (Nothing in VB) is 
passed. The fourth parameter defines the absolute expiration date: the date and time at which the item 
is considered outdated and has to be removed from thecache. In this example, this date is constructed 
by adding 20 minutes to the current date and time, meaning the item will be cached for a maximum 
duration of 20 minutes. The final parameter can beused to set a new expiration time every timethe 
item is accessed. This is a great way to cache frequently used items and ensures that items that are not 
used often are removed from thecache sooner. H owever, the previous example is using an absolute 
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expiration date, wiiicli meansyou liaveto pass tlie constant vaiueof system. web. caching. cache 
.NosiidingExpiration as tlie siiding expiration parameter because tiie two parameters are mutuaiiy 
exciusive. 

At tliis stage, if tiie item exists in tlie database, you iiave a valid Review instance, wiietiier or not it 
came from tiiecaclie. Tliisinstanceistiien used to fill the Label controlsin the page and the page's 

Title and MetaDescription properties: 
VB.NET 

TitleLabel .Text = myReview. Title 
SummaryLabel . Text = myReview. Summary 
BodyLabel .Text = myReview. Body 
Title = myReview. Title 
MetaDescription = myReview. Summary 

C# 

TitleLabel .Text = myReview. Title; 
SummaryLabel . Text = myReview. Summary ; 
BodyLabel . Text = myReview. Body; 
Title = myReview. Title; 
MetaDescription = myReview. Summary; 

Setting the Title and MetaDescription is good for your users and for the ranl<ing of your page in 
search engines. The title is used when bool<marking a page, so a clear title helps the user find your 
page again. Search engines such as Google and Bing use the title in their evaluation of what the 
page is about. They use the text that you set in the MetaDescription (which ends up as a <meta 
name="description" /> element in the <head> section of the page's H TM L) to present the results to 
the user. This means the text you enter there is often your first point of contact with a user that uses a 
search engine. As such, it's an important piece of information. Rather than reusing the summary prop- 
erty for this purpose, you could add an additional column (called searchEngineoescription, for 
example) to the Reviews tablein thedatabase. You then need to bring this column into theADO.N ET 
Entity Data M odd by right-clicl<ing the EDM X model diagram in the Entity Designer and choosing 
Update M odd from Database. 0 nee you've added this property to the modd, don't forget to change the 
edit pages in the M anagement section (AddsditReview.aspx or AddEditReviewHandcoded.aspx) so 
they support this new property as wdl. Finally, in the viewDetaiis.aspx page you can then assign its 
value to the MetaDescription property of the Page dass. 

Besides the MetaDescription property, the Page class was extended with a MetaKeywords property 
in ASP. N ET 4. This property worl<s more or less the same as the MetaDescription and enables you to 
set the keywords for the page. Although the importance of keywords to influence search engine rank- 
ing is heavily debated (many say they are not used by search engines at all), it can't hurt to set them. 
You could add the keywords to thedatabase and modd by following the same steps as outlined for the 
SearchEngineoescription property. For a lot more tips on Search engine optimization (SEO), con- 
sider getting a copy of Wrox's Professional Search Engine 0 ptimization with ASP.N ET: A Devdoper's 
Guide to SEO (ISBN : 978-0-470-13147-3). 

The viewDetaiis .aspx page now performs pretty wdl; The first time it loads, the item is retrieved 
from the database and stored in the cache. On subsequent visits to the page, thedatabase is no longer 
accessed but the item is retrieved from the much faster cache. 


600 I CHAPTER 15 WORKING WITH DATA - ADVANCED TOPICS 


PRACTICAL DATA TIPS 

Here are some practical tips on wori<ing witli data in your ASP. N ET websites: 

>■ W lienever you use tlie numerous styie properties of tlie data-bound controls, consider using 
tlie cssciass property instead of setting tlie individual style properties directly. This avoids 
page bloat and mal<es your site easier to maintain. 

>• The section about the control's life cycle has an exercise that shows you how to display the 
various events and the order in which they occur. You could extend the example and write 
code for even more events. Additionally, you could add more controls to the page and handle 
their events as well to help you establish a solid understanding of those events. Because a 
good understanding of those events and their order is often critical in writing web applica- 
tions, the time you put into this little research project is well spent. 

>- Whenever you are writing pages that access a database or other slow or scarce resources like 
files or web services, consider whether they can benefit from caching. Although it's not that 
hard to add caching at a later stage, it's best to put it in as early as possible. 

>• Consider hand-coding complex data access pages. Though they are more difficult to write at 
first, you'll end up with pages that are easier to maintain in the long run. 

SUMMARY 

This chapter covered some of the more advanced topics on presenting data with the data controls 
that earlier chapters deliberately skipped to enable you to focus on the core data access concepts. 

The chapter started off with a good look at the numerous style elements that most data-bound con- 
trols have to influence their appearance. You then learned more about the numerous events that con- 
trolscan fire. These events can be used to change the appearance of the controls programmatically. 
Therefore, a solid understanding of the page's life cycle is important knowledge. 

The chapter closed with a discussion of the various caching capabilities that ASP.N ET supports to 
help you improve the performance of your websites. 

This chapter showed you some advanced ways to handle data in an ASP.N ET web application. 
The following chapter shows you how to protect some of this data — for example, the Management 
folder — from unauthorized users by implementing ASP.N ET security. 
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EXERCISES 


1. Imagine you have a simple Web Form witin a single Button on it. If you click the Button in the 

browser, it causes a postback and at the server its click event is triggered. What happens first — 
the Page's Load event or the Button control's Click event? 


2. Right now, when you insert or edit an item on AddEditReviewHandCoded . aspx, you're taken back 
to Reviews . aspx when you're done. It would be nice if the genre for the new or updated review 
item would already be preselected in the drop-down list. What code do you need to write to 
implement this feature? 

3. What's the proper way to avoid an exception that you handled in a data-bound control's event in 
the Code Behind from being displayed in the page? 

You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 


ASP.NET styles 

Control properties that inherit from the style class and that let you 
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Caching 

A technique used to store copies of data in a location that is quicker 
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Cache invalidation 

A mechanism where items are removed from the cache when they 
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— 

Exception 

The .NET term for an error (exceptions are discussed In great detail in 


Chanter 181 

Foreign key constraint 

An error that occurs at the database level when you try to delete a 

error 

row that other rnw^ deoend on 
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MetaDescrlptlon 

These two properties on the Page class enable you to set metadata 

MetaKeywords 

for the page in the browser that can be used by search engines. 

Output caching 

A form of caching where an entire page or a user control is cached to 


prevent it from being generated from scratch every time it's accessed 

Stale data 

A cached copy of some data that no longer accurately represents the 


original data 



Security in Your ASP.NET 4.5 
Website 

WHAT YOU WILL LEARN IN THIS CHAPTER: 

>• Important terminology you'll encounter when dealing with security 

>" The ASP.NET application services that drive the security model of 
ASP.NET 

> How you can let users sign up for an account for your site 

> How users can reset their passwords or request new ones 

>• How you can manage the users and roles in your database at devel- 
opment time 

>• How you can present different content to different users based on 
their access rights in the system 

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 
www. wrox.com/remt it ie.cgi?isbn=iii83 118 0 9. The code is in the Chapter 16 download. 

Until now, you have been creating pages in your website that are accessible to all visitors to 
your site. There is currently no way to block certain resources I ike A SPX files or even whole 
folders for specific users. That means, for example, that currently anyone can access your 
Management folder and Start messing with the genres and reviews in the system. 
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Clearly, this is not something you'd want in a production website. So you need to thinl< of a good 
security strategy to stop unwanted users from accessing specific content. You also need to lool< at a 
mechanism that enables users to sign up for a new account, and at the same time enables you to des- 
ignate certain users as managers of your website and grant them special access rights. 

ASP.N ET 4.5 and VSship with all the tools you need to create a solid and safe security mechanism. 
In this chapter, you learn how to make use of these tools in your ASP.N ET website. 

Before you start looking at how security is implemented in theASP.N ET Framework, you need to 
understand a few important terms that you'll come across in every discussion on security. 


INTRODUCING SECURITY 

Although security can be quite a complex subject, it often revolves around three straightforward 
questions: 

>■ Who are you? 

>• H ow can you prove that? 

>■ What are you allowed to do in the system? 

Identity: Who Are You? 

An identity is what makes you, you. The answer to what an identity is depends on the context it is 
used in. As a citizen of a country, your identity revolves around your person, your official name and 
birth date, and maybe even a Social Security number. H owever, for a website likep2p.wrox.com, 
Wrox's community website, your identity may be as little as your e-mail address. 

N 0 matter what you include in an identity, it is a way to refer to you. But how does anyone else 
know you? And how can they be sure it's really you when you log on to a website, for example? This 
is where authentication enters the game. 

Authentication: How Can You Prove Who You Are? 

Authentication is about providing evidence about who you are. W hen you need to register for a 
library card, you may need to show your passport to prove that the name you register the card under 
really belongs to you. With a websitelikep2p.wrox.com, you need to providean e-mail address 
and a password. Together, these two pieces form the evidence that proves your identity. M any other 
mechanisms are used for authentication, including high-tech fingerprint or iris scans, smart cards 
and tokens (where the evidence is stored on something tangible), and so on. H owever, in light of 
the discussion on security of ASP.N ET websites, this chapter sticks to a username and password for 
authentication. In many cases, e-mail addresses act as usernames because they uniquely identity 
a user. 
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Authorization: Wliat Are You Allowed to Do? 

Depending on who you are, a system grants you more or fewer privileges to access certain areas. 
Tliinl< about tlie liiglily secured lieadquarters of a national security agency in an action movie, for 
example. Even if the main character is allowed to enter the building, he is often not allowed to enter 
specific areas because he lacks the proper authorization (the fact that the hero eventually gains 
access in those movies using a two-minute hack in the system is beside the point here). 

To determine what a user is allowed to do, a system needs to know two things: the permissions for 
the current user and the authorization rules for the resource a user is trying to access. 

The permissions for the user are based on her username (the identity it represents) and the roles (or 
security groups) the user is optionally assigned to. Similarly, resources can be opened up or blocked 
for specific users or roles. W hen there is a match between the current user and the access rules for 
the resource a user is trying to access, the user is granted access. If the user is blocked specifically, 
access is denied. Imagine a file that is only accessible to the user Tom and the group Developers. The 
user Tom can access that file, regardless of whether he is in the Developers role. At the same time, 
the user Charlotte must be in the Developers role in order to access the file. 

You see how to work with these concepts in the remainder of this chapter. 

A large part of these security concepts in ASP.N ET are implemented with the so-called application 
services, discussed next. 

An Introduction to the ASP.NET Application Services 

Versions of ASP.N ET beforeASP.N ET 2.0 had some support for security. In ASP.N ET 1.x 
applications, you needed to writea lot of code to implement a solid security strategy. Thedownside 
of writing this code is that it was often pretty much the same in all your websites. You were more or 
less forced to write the same code over and over again to implement a security mechanism. 

These problems were solved in ASP.N ET 2.0, which shipped with theapplication services: a set 
of services you can use in your website to support management of users, roles, profiles, and more. 
These services are based on a provider model, something you'll learn more about shortly. The appli- 
cation services are still strongly present in ASP.N ET 4.5 and have been updated to simplify configu- 
ration and deployment. 

ASP.N ET 4.5 ships with a number of application services. The most important ones are: 

>• M embership — Enables you to manage and work with user accounts in your system. 

>- Roles— Enables you to manage the roles to which your users can be assigned. 

>- Profile— Enables you to store user-specific data in a back-end database. 

Figure 16-1 gives an overview of these services and shows how they are related to your website and 
the underlying data stores that the services may use. 
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ASP.NET 4.5 Websites and Applications 


< If) 


Membership 



Profile 


Other Services 


MembershlpProvlder 


RoleProvider 


ProflleProvider 


Other Providers 







FIGURE 16-1 


Atthetop of the diagram, you seetheASP.N ET 4.5 websites and web appiicationstliat represent 
tlie websites tliat you buiid. Tliese websites can contain controls I il<etlie login controls (discussed 
next) that in turn can talk to the ASP. N ET application services such as membership and roles. 
To create a flexible solution, these services don't talk to an underlying data source directly, but 
instead talk to a configured provider. A provider is an interchangeable piece of software that is 
designed for a specific task. For example, in the case of the membership services, the M embership 
provider is designed to work with users in the underlying data store. You can configure different 
providers for the same application service depending on your needs. Previous versions of ASP.N ET 
shipped with a SQL Server provider that enables your membership services to talk to a SQL Server 
database (both the Express and commercial editions) and an Active Directory provider (that lets you 
create and manage users in Active Directory on Windows). These providers are still available, but 
there is now anew alternative. In June 2011, M icrosoft released the Universal Providers that work 
the same as the SQL Server providers, but can be used to target all editions of SQL Server, including 
SQL Server Compact and SQL Azure. This makes it easy to switch the underlying database, simply 
by changing the configuration for the application. The Universal Providers are available for .N ET 4 
and .N ET 4.5 and are ideal for Internet-connected websites like pianetwrox.com. If you create a 
new ASP.N ET Web Forms site, the Universal Providers are already set up for you. If you create an 
emptyASP.N ET website instead (as is the case with the Planet Wrox sample project), you need to 
add the providers yourself using N uGet, as you see in a later exercise. 
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The beauty of the provider model is that you can swap providers througli configuration without any 
cliangesto your programming code. If you have your own custom data store, you could write your own 
provider and plug it into your website to replaceone of thedefault providers with very littleeffort. 

Each provider needs a data store — represented by the bottom part of the diagram in Figure 
16-1 — and is written to worl< with one or more specific data stores. For example, the 
DefauitMembershipprovider (to handle membership servicessuch as creating users, logging in, 
and resetting passwords) and the Def auitRoieProvider (to handle role-related tasks) are designed 
to worl< with any version of M icrosoft SQL Server, including Express, LocalDB, SQL Server 
Compact, and SQL Azure. These two providers replace the sqiMembershipProvider and the 
sqiRoieProvider that Shipped With earlier versions of ASP. N ET. 

In the remainder of this chapter, you see how to use the DefauitMembershipprovider and the 

Def auitRoieProvider. ih the hext Chapter, yOU WOrl< with theoefaultProfileProvider. YoU Can 

configure all three providers to use the same SQL Server database, mal<ing it easy to centralize all 
your user data. 

Ideally, you don't deal with these providers directly. Under normal circumstances, the various provid- 
ers are configured for your website at a central location. You then use these providers by tall<ing to 
the application services. Although you could access these services directly from code, you often use 
theASP.N ET built-in login controls to do the hard work for you. These controls are discussed next. 


INTRODUCING THE LOGIN CONTROLS 

The login controls that ship with ASP.N ET 4.5 takeaway much of the complexity usually associated 
with writing a security layer in a website. Theavailablelogin controls effectively encapsulate all the 
code and logic you need to validate and manage users. These controls work by communicating with 
the configured provider through the application services, instead of talking to a database directly. 
To see how thisworks, the following exercise shows you how to createa simpleLogin and Sign Up 
page that enables new users to create an account and then log in. The section that follows then looks 
at the seven login controls that ship with ASP.N ET 4.5. 


UjUKlJlSJ^] Creating Login and Sign Up Pages 

In thisTry ItQut, you extend theLogin page that you created earlier. You also createa new page that 
enables a user to sign up for an account on the Planet Wrox website. 

1 . Open your website in VS and then open the Package Console M anager (choose Tools o Library 
Package M anager o Package M anager Console). 

2. Enter the following command at the Package M anager Console prompt and press Enter: 

Install-Package Microsoft . AspNet . Providers 

By executing this package, VS downloads the providers, adds an assembly called system 
.web.providers.dll to the Bin folder of your Site and adds configuration information for the 
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3. 


4. 


5. 


providers to web . conf ig. W hen the command has completed, 
your Solution Explorer should lool< lil<e Figure 16-2. 

From the root of the site, open the Login, aspx page in M arl<up 
View. If you don't have that page, create it now, based on your cus- 
tom template, and set its Title to Log in to Planet Wrox. Then 
add an <hi> element with the same text in the cpMaincontent 
placeholder. 

From the Login category of the Toolbox, drag a Loginstatus con- 
trol and drop it in the page after the <hi> element. 


Search Solution Explorer (Ctrk;) fi - 

Solution 'Srte' (1 project) 
J © Site 

> 0 About 

> £ App_Code 

> S App.Data 

^ C5 App Themes 
J Q Bin 

> III EntityFramework.dll 

> ill System.Web.Providers.dll 

> S Controls 


FIGURE 16-2 


Switch to Design View and from theToolbox, drag a Login control 
and drop it on the Loginstatus, so it ends up right above it. Both 
controls are visible in Figure 16-3 (the Loginstatus appears as a small Login linl< below the Login 
control). 


Login. aspx* -ft X 


MasterPages/Frontend, master 


cpMainContent (Custom) [ 


Log in to Planet Wrox 


13 


User Name: T 
Password: [~ 


Login 


I~ Remember me next time- 


Log In 


Loan 


Select a Theme 


s Design | o Split I <» Source I <asp:Content#Content2>| osp:Login#Login1> 


0 


FIGURE 16-3 


6. Open the Properties Grid for the Login control and set the two properties shown in the following 
table: 


PROPERTY 

CreateUserText 
CreateUserUrl 


VALUE 

Sign Up for a New Account at Planet Wrox 

SignUp . aspx 


7. In the root of the website, create a new Web Form called si gnUp . aspx based on your custom tem- 
plate and give it a Title of Sign Up for a New Account at Planet Wrox. 

8. Switch the page to Design View and from theToolbox, drag a createuserwizard control into the 
main content area for the page. Save and close the page. 

9. Open the Web. conf ig file from the root of the site and add an <authentication> element with its 
mode attribute set to Forms as a direct child of the <system.web> element. 


Introducing the Login Controls | 609 


<system.web> 

outhentication mode=" Forms" /> 

</ system. web> 

10. still in the web.conf ig file, take a look at the <connectionstrings> section. N otice how the 
N uGet package manager added a new connection string for you. You could leave this connec- 
tion string in there, and everything would work. H owever, with this connection string, .N ET 
creates a new database and attaches that to SQL Server. From a management perspective, it'll 
be easier if your user data is stored in the same database as your reviews, genres, pictures, and 
photo albums. This is quite easy to accomplish, though. First, remove the connection string 
called Def auitconnection that was added by the package manager. N ext, replace the value 
for the connectionstringName attribute on all four providers (for Profile, M embership. Roles, 
and Session state) with the name of your Planet Wrox connection string (which should be called 
pianetwroxconnectionstringi). Y ou should end up With Configuration code that looks like the 
following. N ote that I left out a lot of code and only show the code for the M embership provider 
to save some space. The important part is the connectionstringName attribute on all four provid- 
ers that points to the Planet Wrox connection string. 

<connectionStrings> 

<add name="PlanetWroxConnectionStringl" connectionString="... 

<add name="PlanetWroxEntities" connectionString="... 
</connectionStrings> 

<system.web> 

. . . Other code here 

<membership def aultProvider= "Def aultMembershipProvider " > 
<providers> 

<add name= "Def aultMembershipProvider " 
. . . Other attributes here 

connectionStringName=" Plane tWroxConnectionStringl" 

enablePasswordRetrieval=" false" enablePasswordReset=" true" 
. . Other attributes here 

/> 

< /providers > 
</membership> 
. . . Other code here 
</ system. web> 

11. Save all your changes, go back to Login. aspx, and press Ctrl4f 5 to open that page in your 
browser. You are greeted with a login box, as shown in Figure 16-4. 

N ote that the login status below the Login control is currently set to Login (as a call to action) to 
indicate you are not logged in yet. If the text says Logout instead, verify that you set authentica- 
tion to Forms in the Web . config file. Otherwise, Windows authentication isused, which logs you 
in with your Windows account. 

12. Try to log in by entering a random usernameand password. Obviously, this fails because the 
account doesn't exist. It may take a few seconds before you seethe result because ASP. N ET is busy 
setting up the membership database. 

13. Follow the Sign Up link below the Login control to go to signup. aspx and then create an 
account by entering your personal details (see Figure 16-5). By default, the password needs to 
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have a minimum iengtli of six ciiaracters. N ote tiiat tiie password is case sensitive. Write down 
tile username and password you just entered, because you'ii need tiiis account information 
again iater. 



FIGURE 16-4 
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^ localho5t:4%76/SiqnUp,a 


Sign Up for Your New Account 


User Name: | Imar 
Password: | 
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FIGURE 16-5 


14. Ciici< tiie Create User button to iiavetiie account created for you. Wiien tiie page reioads, you get a 
confirmation tliat tlie account was created successfuiiy. Ciici< tiie Login item from tiie main Menu or 
TreeView (depending on tiietliemeyou currentiy iiave seiected). You aretai<en to Login. aspx 
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again where the Loginstatus control below the Login control 
now indicates that you are logged in (see Figure 16-6). W hen you 
create a new account using the createuserwizard, you're logged 
in automatically, although you can change that behavior by set- 
ting the LoginCreatedUser property Of the COntrol to false. 


Log in to Planet Wrox 


Log In 


User Name: | 

Password: | 
□ Remember me next time. 


Log In I 

Sign Up for a New Account at Planet Wrox 
Logout 


FIGURE 16-6 


15. Click the Logout linl< and you are logged out, causing the 

Loginstatus to display the text Login again. In the Login con 
trol, enter the username and password you entered in step 13 
and clicl< the Log In button. You're logged in and redirected to 
the homepage. 0 n the main Menu or Treeview, clicl< Login to 
return to the Login page again. N ote that the Loginstatus has changed and now shows Logout 
again, illustrating the fact that you successfully logged in. 

At this stage, being logged in doesn't add much value; all you see is the Loginstatus change from 
Login to Logout. H owever, later in this chapter you see how to offer different content to logged-in 
users. 


How It Works 

Besides adding and configuring a few ASP.N ET Server Controls, you didn't do any coding in this exer- 
cise. Still, you were able to implement a fully functional login procedure that enables a user to sign up 
for an account and then log in to the site. So how does all this worl<? Asyou learned earlier, the ASP. 
N ET controls tall< to the configured application service providers; a software layer that sits between the 
login controls and the SQL Server database that keeps track of the users. 

The very first time you try to log in (or use other login controls that require database access), the 
provider checks if your application is using a database with the necessary database objects, such as 
tables. By default, it checks the database by looking at a connection string pointed to by theconnec- 
tionstringName attribute on the Configured M embership provider. If the 
database from the connection string doesn't exist, or it doesn't contain the 
necessary tables, .N ET executes a SQL script to prepare the database for 
you. That is why there was a delay when you entered the username and 
password in step 12. To find out what the database looks like, go back to 
VS, expand theApp_Data folder, and then double-click your pianetwrox. 
mdf database. This opens the Database Explorer and shows your database. 
Expand the Tables node to see which database objects have been added for 
you, as shown in Figure 16-7. 

After this database has been created successfully, the login controls 
can use it. For example, when you create a new account using the 
Createuserwizard control, records are inserted in the Memberships and 
Users tables. Similarly, when you try to log in, your username and pass- 
word are checked against these tables. 
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FIGURE 16-7 


To force theASP.N ET run timeto use forms-based authentication (which the configured M embership 
provider uses under the hood), you need to set the mode attribute of the authentication element to 

Forms i n the Web . conf ig fi I e: 


<authentication mode="Forms" /> 
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Other options for the mode attribute include windows (where security is handied by Windows itself) and 
None, which disables security altogether. In the remainder of this bool<, the Forms option is used exclu- 
sively because it's the most common solution for Internet-facing web applications. 

The Remember M e N ext Time option of the Login control is more forgetful than you may thinl<. W hen 
you check this option, you are logged in automatically the next timeyou visit the site, provided your 
authentication cool<ie hasn't expired. The first timeyou log in, the server sets a cool<ie that is saved for 
future sessions. H owever, this cool<ie expires after 30 minutes, which means a user returning to the site 
after that period needs to reauthenticate. To extend the period that users remain logged in, you need 
to set the timeout attribute of the <forms> element (which itself is a direct child of the <authentica- 
tion> element) in web.config. The timeout tal<es an integer value representing thetimeout period in 
minutes. The following code sets thetimeout to 24 hours (1440 minutes): 

<authentication mode=" Forms "> 

<forms timeout="1440" /> 
</authentication> 

Lower timeout values are generally considered safer because they don't provide unlimited or long-lasting 
access, but longer timeout values are more user friendly because users don't need to reauthenticate 
every ti me they visit the site. 

If you hadn't reconfigured the providers to use the Planet Wrox database, .N ET would have created a 
new one for you. 


N ow that you have seen how the login controls worl< in conjunction with the auto-generated SQL 
Server Express database, it'stimeto look at the controls in theLogin category of the Toolbox in 
more detail. 


The Login Controls 

ASP.N ET 4.5 ships with seven login controls, each serving a distinct pur- 
pose. Figure 16-8 showsthe Toolbox with the seven login controls (the 
pointer is present in all Toolbox categories and is not a login control). 

In the sections that follow, each of these controls is explained in more 
detail. 

Login 

As you saw in the previous exercise, theLogin control enables a user 
to log in to the site. Under the hood, the control talks to the configured 
M embership provider through the application services to see if the user- 
name and password represent a valid user in the system. If the user is 

validated, a cookie is issued that is sent to the user's browser. 0 n subsequent requests, the browser 
resubmits the cookie to the server so the system knows it's still dealing with a valid user. The differ- 
ent settings for the M embership provider are all configured in the <membership /> element of the 
Web.config file. You learn more about this element later in this chapter. 
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To createa fully functional Login page, you need only the following control declaration: 

<asp:Login ID="Loginl" runat=" server" /> 

H owever, In most situations you want to enhance the appearance and behavior of the control by set- 
ting one or more of the properties, shown In the following table. 


PROPERTY 

DESCRIPTION 

DestinationPageUrl 

Defines the URL the user is sent to after a successful login attempt. 
When you leave this property empty, the value is taken from the 
def aultUrl attribute of the <f orms> element in Web . conf ig which 
defaults to Default . aspx. 

CreateUserText 

Controls the text that is displayed to invite users to sign up for a new 
account. If you leave this property empty, the sign up link is not shown. 

CreateUserUrl 

Controls the URL where users are taken to sign up for a new account 

D i sp 1 ayRemembe rMe 

Specifies whether the control displays the Remember Me option. 
When set to False, the check box for this option is not shown. 

Remerab e r Me S e t 

Specifies whether the Remember Me option is initially checked. 

PasswordRecoveryText 

Controls the text of a link that is displayed to tell users they can reset 
or recover their password. If you leave this property empty, the link is 
not shown. 

PasswordRecoveryUrl 

Specifies the URL where users are taken to get their (new) password. 

VisibleWhenLoggedIn 

Determines whether the control is visible when the current user is 
logged in. True by default. 


The authentication mechanism of ASP.N ET by default assumes you havea page called Login. aspx 
In the root of your site that Is used to let users log In. To be functional, the minimum that this 
page requires Is a Login control. If you want to use a different page, you can specify Its path In the 
<forms /> element under <authentication />llkethls; 

<authentlcation mode= " Forms " > 

<forms loginUrl="-/Account/MyLoginPage.aspx" /> 

</authentlcatlon> 

With this configuration, you tell theASP.N ET run time to load the MyLoginPage. aspx page from 
the Account folder In theslte's root whenever a user needsto present her credentials. N otethat on 
the Login page (configured In the loginuri), the visibiewhenLoggedm property of the Login con- 
trol has no effect. On the configured Login page, the Login control Is always visible. If you want to 
hide It you can use a Loginview control, as you see In a later exercise. 


In addition to these properties, the Login control has a range of Text properties, such as 

LoglnButtonText, RememberMeText, TltleText, and UserNameLabelText, that areUSed tO Set the 
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text that appears in the control and in its various chiid controls I il<e the Button and Label controls 
that mal<e up the user interface. 

J ust as with the data-bound controls, the login controls have numerous style properties that enable 
you to tweak their appearance. You're encouraged to checl< out the Styles category of the Properties 
G rid for the controls to see how you can set the various styling options. Remember, just as with the 
data-bound controls, you can move much of the styling information to sl<in and CSS files. 

The Login control also exposes a few events that you typically don't need to handle, but that 
can come in handy from time to time. For example, theLoggedm event fires right after the 
user has logged in and is a good place to send the user to another page dynamically if the 

DestinationPageUrl iS not flexible enOUgh. 

LoginView 

The LoginView is a handy control that lets you display different data to different users. It enables 
you to differentiate between anonymous and logged-in users, and you can even differentiate between 
users in different roles. TheLoginview is template-driven and as such lets you define different tem- 
plates that are shown to different users. The following table describes the two main templates and 
the special Roiecroups element. 


TEMPLATE 

DESCRIPTION 

AnonymousTemplate 

The content in this template is shown to unauthenticated users only. 

LoggedlnTemplate 

The content in this template is shown to logged-in users only. This tem- 
plate is mutually exclusive with the AnonymousTemplate. Only one of 
the two can be visible at any time. 

RoleGroups 

This control can contain one or more RoleGroup elements that, in turn, 
contain a ContentTemplate element that defines the content for the 
specified role. The role or roles that are allowed to see the content 
are defined in the Roles attribute, which takes a comma-separated 
list of roles. The RoleGroups element is mutually exclusive with the 
LoggedlnTemplate. That means that if a user is a member of one of 
the roles for the RoleGroup, the content in the LoggedlnTemplate 
is not visible. Additionally, only content for the first RoleGroup that 
matches the user's roles is shown. 


The LoginView control itself doesn't output any markup other than the content you define in the 
various child elements of the control, which means you can easily embed it between a pair of H TM L 
tags like <hi>and <ii> to create customized headings or list items. 

The following code snippet shows a Loginview control that defines content for three different users: 
anonymous visitors to the site, logged-in users, and users that have logged in and are members of the 
M anagers role: 

<asp : LoginView ID="LoginViewl" runat= " server " > 
<AnonymousTemplate> 

Hi there visitor. Would you be interested in signing up for an account? 
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</AnonymousTemplate> 
<LoggedInTetnplate> 

Hi there visitor and welcome back to PlanetWrox.com. 
</LoggedInTemplate> 
<RoleGroups> 

<asp : RoleGroup Roles= "Managers " > 
<ContentTemplate> 

Hi there manager. You can proceed to the Management section. 
</ContentTemplate> 
</asp : RoleGroup > 
</RoleGroups> 
</asp : LoginView> 

You see how to create and configure roles later In this chapter. 
LoginStatus 

As demonstrated In the previous Try It Out exercise, theLoginstatus control provides Information 
about the current status of the user. It provides a Login link when the user Is not authenticated and 
a Logout link when the user Is already logged In. You control the actual text being displayed by set- 
ting theLoginText and LogoutText properties. Alternatively, you can set the Logimmageuri and 
Logoutimageuri properties to display an Image Instead of text. W hen you set both an Image and a 
text, the Image Is shown and the text Is used as the alternative text for the Image. Finally, you can 
set the LogoutAction property to determine whether the current page refreshes If the user logs out, 
or whether the user Is taken to another page after logging out. You determine this destination page 

by setting the LogoutPageUrl. 

Besides these properties, the control Is capable of raising two events, Loggingout and Loggedout, 
which fire right before and after the user Is logged out. 

LoginName 

LoginName Is an extremely simple control. All It does Is display the name of the logged-ln user. 
To embed the user's name In some text, such as You are logged in as imar, you can use the 
Formatstring property. If you Include {0} In this format string. It will be replaced with the user's 
name. 

You see how this works In the next exercise, which has you modify the login and master pages for 
the site so they display relevant Information about the user. 


lljimmg^Q Working with the Login Controls 

In thIsTry ItOut, you hide the Login control on the Login. aspx pagewhen theuser Isalready logged 
In and display a message Instead. Additionally, you add text to thefooter of the page that displays the 
name of the user together with an option to log out again. 

1 . Open Login, aspx and switch to Design View. From the Login category of the Toolbox, drag a 
new Loginview control on top of the Login control so It's placed right above It In the page. 

2. 0 pen the Smart Tasks panel of the Loginview control and make sure that AnonymousTempiate Is 
selected In the Views drop-down list, visible In Figure 16-9. 


616 I CHAPTER 16 SECURITY IN YOUR ASP.NET 4.5 WEBSITE 


3. 


4. 


5. 


6. 
7. 


8. 


9. 


Any content you put in the control is piaced in tlie 
AnonymousTempiate area, becausetiiat is now tiie 
active template for tlie control in Design View. 

Clicl< the Login control once to select it and then press 
Ctrl+X to cut it to the clipboard. Clicl< inside the small 
white rectangle that represents the Loginview to posi- 
tion your cursor in the control, and then press Ctrl+V to 

paste the Login control into your Loginview. 

Open the Smart Tasl<s panel of the Loginview again 
and switch to theLoggedinTempiate using the V iews 
drop-down list. Clicl< inside the small white rectangle of 
the control again and type the text you are already 

logged in. 

Switch to M arkup View and look at the code. The Login 
AnonymousTempiate, and the text you typed should be di 
tags: 


Login. aspx* -0 X 


Log in to Planet Wrox 


LoginViewlB] LoginView Taslcs 

Edit RoleGroups... 


aspiloqinview#LoqinViewl 


Views: AnonymousTempiate [v]| 


Administer Website 


User Nami 
Password! 


r Remember me next time. 


Log In I 

Sign Up for a New Account at Planet Wrox 


Lofiin 


FIGURE 16-9 


control should be placed inside the 

splayed within theLoggedinTempiate 


<asp : Loginview ID="LoginViewl" runat= " server " > 
<AnonymousTemplate> 

<asp:Login ID="Loginl" runat=" server" CreateUserUrl="SignUp.aspx" 

CreateUserText="Sign Up for a New Account at Planet Wrox"> 
</asp:Login> 
< /AnonymousTempiate > 
<LoggedInTemplate> 

You are already logged in. 
</LoggedInTemplate> 
</asp : LoginView> 

Save and close the page because you're done with it for now. 

Open the master page Frontend. master in M arkup View and locate the <footer> element at the 
bottom of the page. Remove the text Footer Goes Here and replace it with a new LoginName 
control by dragging it from the Toolbox into the<footer> element. Set its Formatstring prop- 
ertyto Logged in as { 0 } by typing in the code directly: 

< asp : LoginName ID="LoginNamel" runat=" server" FormatString=" Logged in as {o}" /> 

From the Toolbox, drag a new Loginview control and drop it below the LoginName control, 
but still in the <footer> element. Switch to Design View, and on the Smart Tasks panel of the 
Loginview, choose LoggedinTempiate from the Views drop-down list. Then in the white rectangle 
for the active LoggedinTempiate, drag and drop a new Loginstatus control. 

Switch to M arkup View again and wrap the code for the Loginstatus in a pair of parentheses. 
You should end up with the following code: 


<f ooter> 

<asp: LoginName ID="LoginNamel" runat="server" Formats tring=" Logged in as {O}" 
<asp: Loginview ID="LoginViewl" runat="server"> 
<LoggedInTemplate> 

(<asp:LoginStatus ID="IioginStatusl" runat= "server" />) 


/> 
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Logout 


</LoggedInTemplate> 
</asp : LoginView> 

</ f ooter> 

10. Save all your changes and request Login. aspx In your browser. Log in 
with the account and password you created In a previous exercise (you 
may need to log out first by clicking the Logout link). If you don't recall 
the usernameand password, simply click the Sign Up link to create a new figure 16-10 
account. N ote that as soon as you are logged In, the footer displays the text visible In Figure 16-10. 

11. Click the Login Item In the Menu or Treeview to go to the Login page. Instead of the Login control 
you should now see a message Indicating that you are already logged In. 

12. Click the Logout link In the footer at the bottom of the page. The page refreshes and displays the 
Login control again. Additionally, the text from the footer has now disappeared. 

How It Works 

You started by adding a Loginview to the Login page to wrap the Login control and a text message. 
The Login control Is shown when the user Is not logged In, whereas the text Is displayed for logged-ln 
users only. 

The code In the footer of the master page contains a LoginName control that displays the name of the 
user that Is logged In. It doesn't display anything for anonymous users. To control the text being dis- 
played, you usethe Formatstring property: 

<asp : LoginName ID="LoginNamel" runat=" server" FormatString= "Logged in as {o}" /> 

At run time, the {0} Is replaced with the user's name. 

By default, the Loginstatus you added displays a link to enable users to log In and log out. Because 
the Menu or the Treeview already contains a link to the Login page, the footer uses a Loginview again 
to display the Logout text only when the user Is currently logged In. If you want to add a Login link as 
well, you can extend the Loginview with an anonymous template and an additional Loginstatus or 
remove the entire Loginview so the Loginstatus Isvlslbleto all users. 


In addition to the controls you have seen that enable a user to log In and that usethe current user's 
log-In status to show or hide relevant content, theLogIn category of the Toolbox contains three 
more controls that enable users to sign up for a new account on the site, to change an existing pass- 
word, and to recover a lost password. These controls are discussed next. 

CreateUserWizard 

You briefly saw createuserwizard at work In an earlier exercise. But the control has a lot more to 
offer than the standard behavior you saw In that exercise. 

To start with, the control has a long list of Text properties, such as canceiButtonText, 

CompleteSuccessText, UserNameLabelText, and CreateUserButtonText, that affeCt the text 

used In the control. All properties have good (English) defaults, but you can change them If they 
don't suit your needs. 
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The control has a bunch of properties that end in ImageUrl, such as CreateUserButtonlmageUrl. 

These properties enable you to define images for various user actions instead of the default buttons 
that the control generates. If you set any of these properties to a valid imageuri, you also need to set 
the corresponding ButtonType. For example, to change the Create User button to an image, you need 

to set the CreateUserButtonlmageUrl tO a Valid image and set CreateUserButtonType tO Image. 

The default value for the ButtonType is Button, which renders standard buttons by default. You 
can also set the ButtonType to Link to have them rendered as standard LinkButton controls. The 
associated text properties introduced at the beginning of this section are displayed on the buttons 
and the linl<s. 

Additionally, the control exposes a number of useful properties that you can set to change its behav- 
ior and appearance, shown in the following table. 


PROPERTY 

DESCRIPTION 

ContinueDestinationPageUrl 

Defines the page where users are taken when they click 
Continue after signing up. 

DisableCreatedUser 

Determines whether or not the user is marked as disabled 
when the account is created. When set to True, users can- 
not log in to the site until their account has been enabled. 
You see how to activate and deactivate user accounts manu- 
ally later. Defaults to False. 

LoginCreatedUser 

Determines whether or not the user is logged in automati- 
cally after the account has been created. Defaults to True. 

RequireEmail 

Determines whether or not the control asks the user for an 
e-mail address. Defaults to True. 

MailDef inition 

Contains a number of subproperties that enable you to 
define the (optional) e-mail that gets sent to users after they 
sign up. 


You may notice that the control doesn't have any properties to change the password policy that 
requires users to type a password of at least six characters. Because multiple controls need access to 
these settings, you need to configure them on the underlying provider. In the section "Configuring 
Your Web Application" later in this chapter, you see how this worl<s. 

The createuserwizard control is ableto Send a confirmation e-mail to users to inform them their 
new account was created successfully. This e-mail message can also serve as a reminder of their 
usernames and passwords. In the following exercise, you see how to configure the MaiiDef inition 
element so the createuserwizard sends an e-mail message to new users to confirm their account, 
and sends them their username and password for future reference. 
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TRY IT OUT 


Sending Confirmation E-Mail with CreateUserWizard 

For this exercise to wori<, you need to liave configured the <system.net> dement of tlieweb.conf ig 
fiie witli a vaiid maii server nameor iocai pici<up foider. Refer to Cliapter 9 if you don't liavetliese set- 
tings and don't i<now liow to configure tliem. 

1 . Add a new Text File to tlieApp_Data folder and call it signupconfirmation.txt. 

2. Add thefollowing text to the file and then save and close it: 

Hi <% UserName %>, 

Thank you for signing up for a new account at www.PlanetWrox.com. 
To log in to the site, use the following details: 


User name : 
Your password: 


<% UserName %> 
<% Password %> 


We look forward to your contributions. 


The Planet Wrox Team 


Tal<e care when typing theuserName and Password placeholders. They are wrapped in a pair of 
server-side tags (<% and %>), which are used to give special meaning to these placeholders. 

Open Signup, aspx and on the Properties Grid of the createuserwizard control, locate the 
MailDefinition property and expand it. Clicl< theeodyFiieName property, click the ellipsis to 
browse for a file, and then select signupconfirmation.txt, which you created in theApp_Data 
folder. 

Set the Subject property to Your New Account at pianetwrox. com. W hen you're done, the 
Properties Grid should look like Figure 16-11. 


CreateUserWizard 1 System.Web.UI.WebControls.CreateUserWizard 

B MailDefinition * 
BodyFileName ~/App_Data/StgnUpGMifinTiation.txt 

CC 

EmbeddedObjects (Collection) 
From 

IsBodyHtml False 
Priority Normal 
^^^^^^^^^^^^^H Your New Account at PlanetWrox.com ^ 

Subject 

The subject line of the e-mail message. 


FIGURE 16-11 
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5. Save all changes and request signup, aspx in your browser. Enter the required details for a new 
account and clicl< Create User to sign up for an account. If you get an error about specifying a 
From address, mal<e sure you assigned a valid e-mail address to the from attribute in the web. con- 
fig file: 

<smtp del iveryMethod=" Spec ifiedPickupDi rectory" f rom="planetwroxaexample . com" > 

Refer to Chapter 9 to see how to add this attribute. M al<e sure you enter a valid e-mail address or 
the mail server may still reject it. 

6. After a while, you should receive an e-mail that contains the welcome text you typed in step 2. 
Figure 16-12 shows the message with theuserName and Password placeholders replaced with the 
details that you entered in step 5. 


W7<-*- 1 YourNewAccountatPlanetWrox.com 

Message ^ C 

r^'N CSRsPlyall ^ Copy to Copy ^ Previous 

^ — ' I—* ij] Forward - ^™ Jk. Flag [g Find text ♦Next 

Delete Reply rrn ^'^'^ to Move _ 

T Instant message calendar to 6<iWatch a? Encoding 

Respond .Actions Navigate 

Your New Account at PlanetWrox.com 

Planet Wrox (planetv»rox®example.con-.) Add contact 8/22/2012 2:09 PM 

Tij imarlS'spaanjaars.com; 


Hi ImarSpaanjaars, 

Thank you for signing up for a new account at www.PlanetWrox.com . 

To log in to the site, use the following details: 

User name: ImarSpaanjaars 
Your password: lmar##123 

We look forward to your contributions. 

The Planet Wrox Team 


I 


FIGURE 16-12 


How It Works 


The createuserwizard comes With built-in functionality to send a confirmation message to theuser. It 
doesn't send the message until you specify the <MaiiDefinition> element. You usethe BodyPiieName 
property to point to a text file or an H TM L file that is used as the e-mail's body. 

Within this body, you can use the special placeholders <% userName %> and <% password %>, 
which are replaced automatically with the actual usernameand password that theuser entered in the 
signup form. 
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NOTE It would be a nice addition if you could checl< whether a given user name 
already existed before the user tried to submit the form. You can use the tech- 
niques from previous chapters to accomplish this easily. For example, you could 
use a page method at the server to check whether a given name was already 
taken. You could then call this page method with some JavaScript as soon as 
the user moves away from the User Name field. For a step-by-step guide of this 
solution, take a look at this article on my website: http : //bit . iy/Ldgr2 j. 


The passwordRecovery control, discussed next, also supports a custom mail body and enables you 
to send the message manually in a handler for the sendingMaii event. 


PasswordRecovery 

The PasswordRecovery control enables users to retrieve their existing passwords (when the system 
supports it) or to get a new auto-generated password. I n both cases, the password is sent to the 
e-mail address that the user entered when signing up for an account. 

M ost of the properties of the PasswordRecovery control should be familiar by now. It has a number 
of Text properties, such as GeneraiFaiiureText (shown When the password could not be recovered) 
and SuccessText, that enableyou to set the text that isdisplayed by the control. Italso has properties 
that end with ButtonType, ButtonText, and Buttonimageuri, which enable you to change the lool< 
and behavior of the various action buttons of the control. You setthesuccessPageuri to a pagein 
your site if you want to send the user to another page when password recovery succeeds. 

As with the CreateUserWizard, the PasswordRecovery COntrol alSO haS a MailDef inition 

element that can point to a file that you want to send as the mail body. You can use the same 
placeholders for the username and password to customize the message. If you leave out the 
MailDef inition, thecontrol uses a default mail body, as you see in the next exercise. 


ChangePassword 

The changePassword control enables existing and logged-in users to change their passwords. It 
has a host of properties to change things lil<e text, error messages, and buttons, similar to the 

CreateUserWizard and PasswordRecovery COntrolS. It alSO haS a MailDef inition element that 

enables you to send a confirmation of the new password to the user's e-mail address. You see how to 
use this control in the next exercise. 


||jjyHj22^Q Implementing the Password Functionality 

I n this Try It 0 Ut, you add PasswordRecovery and ChangePassword COntrolS tO the Website tO enable 

users to change and recover their passwords. Because changing a password mal<es sense only for 
logged-in users, you add the changePassword control to its own page. In the next chapter, you protect 
this page so only authenticated users can access it. 

1 . Open up Login, aspx in M arkup View and locate the closing </asp:Login> tag inside the 
<AnonymousTempiate>. R ight after it, type two <br /> elements (use the br code Snippet and 
press Tab to complete the element) to create some room below the Login control. 
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2. D rag a passwordRecovery control from the Toolbox into the code editor, right after the two 
<br /> elements you added in step 1. 

3. Between the opening and closing tags of the PasswordRecovery control, add a <MailDef inition> 
element and then set the Subject of the e-mail to Your New password for PlanetWrox.com. 

Your code should now look lil<ethis: 

</asp : Login> 
<br /> 
<br / > 

<asp : PasswordRecovery ID= " PasswordRecoveryl " runat= " server" > 

<MailDef inition Subject="Your New Password for PlanetWrox.com"></MailDef inition> 
</asp : PasswordRecovery> 

4. Save your changes and dose the file. 

5. In the root of your site, create a new Web Form based on your custom template and call it 

MyProf ile . aspx. Set the Title Of the page to My Profile. 

6. M ake sure you're in M arkup View and in the cpMaincontent content placeholder, create an <hi> 
element (type hi followed by the Tab key) with its contents set to My profile. Right below the 
heading, type some text that explains that the M y Profile page is used for things like changing pass- 
words. W rap the text in a pair of <p> tags to denote a paragraph. 

7. Drag a changePassword control from the Toolbox and drop it after the closing </p> tag. You 
should end up with something like this: 

<asp: Content ID="Content2" ContentPlaceHolderID="cpMainContent" runat="Server " > 
<hl>My Profile</hl> 

<p>The My Profile page allows you to make changes to your personal profile. 

For now, all you can do is change your password below. </p> 
<asp : ChangePassword ID= "ChangePasswordl " runat= " server" ></asp : ChangePassword> 

8. Open the Web. sitemap fllefrom the Solution Explorer and add a new element in theAbout sec- 
tion. Let theurl point to -/MyProfile.aspx and set the title and description to My Profile. 

Y ou should end up with this code: 

<siteMapNode url=" -/About/Default . aspx" title="About" 
description= "About this site"> 
<siteMapNode url= " -/About/Contact . aspx" title="Contact Us" 

description="Contact Us" /> 
<siteMapNode url="~/About/AboutUs . aspx" title= "About Us" 

description= "About Us" /> 
<siteMapNode url="-/MyProfile.aspx" title="My Profile" 
description="My Profile" /> 

< / s i t eMapNode > 

9. Save all changes and close all open files. Right-click Login. aspx in the Solution Explorer and 
choose View in Browser. Below the Login control, you should now seethe PasswordRecovery 
control, visible in Figure 16-13. 

N ote that if you were already logged in, you need to click the Logout link first. 

10. Enter your username in the PasswordRecovery control and click the Submit button. You should 
get an e-mail message with your new, auto -generated password. 
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Firefox 


L.J Log into Planet Wrox | + | 

^ 1^ localhost;49209/Login,aspx 


Home Reviews Gig Pics 


Home > Login 

Log in to Planet Wrox 

Log In 

User Name: [ ] 
Password; j | 
n Remember me next time. 

I Login"! 

Sign Up for a New Account at Planet Wrox 

Forgot Your Password? 
Enter your User Name to receive your password. 
User Name: | | 

[ Submit I 

Login 


FIGURE 16-13 



About Login 



11. Use this new password to log in to tliesite. Wlien you're logged in, choose About o M y Profile 
from the Menu or theTreeview. The changePassword control Visible in Figure 16-14 appears. 


Firefox -'^ 


: My Profile 


^ > locjlho!t49209.'MyProfilE, 


^ I 41- Gooq 


Home > About > My Profile 


My Profile 

The My Profile page allows you to make changes to your personal profile. For now. all you can do is change your 
password below. 

Change Your Password 
Password: | | 
New Password: I | 
Confirm New Password: 


Change Password 1 1 Cancel 



FIGURE 16-14 


12. Enter the auto-generated password that was sent to you by e-mail, type a new password that is eas- 
ier to remember, and then retype the same password. Finally, clicl< ChangePassword. From now 
on, you can log in to the site using your new password. 
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How It Works 

By default, your passwords are stored in a hashed format in the database, which means they cannot 
be retrieved. H ashing is an irreversible process that creates a unique fingerprint of your data. Because 
it's irreversible, there is no way to recreate the password from the hash, which mal<es it safer to store 
in a database. When you log in, the password you enter is also hashed and then the two hashes are 
compared to see if you are allowed to enter. Because the original password cannot be retrieved, the 
passwordRecovery control generates a new password for you. It then sends this password to the e-mail 
address that is associated with theusernameyou entered. As the mail body, it uses a standard template 
that contains the username and the new password. To customize the mail body, you can point the 
BodyFiieName of the MaiiDef inition to a text file that Contains placeholders for the username and 

password, just as you saw how to do with the CreateUserWizard. 


You may have noticed that the login controls use a couple of defaults that you haven't been able to 
change so far. For example, you need to enter a password with a minimum length of six characters. 
You can change these settings for the entire application through the web.config file. 

Configuring Your Web Application 

W hen you added the Universal Providers, N uGet added a number of configuration settings for 
theM embership. Roles, Profile, and Session state providers. H ere's the code for the M embership 
provider: 

<membership def aultProvider= "Def aultMembershipProvider " > 
<providers> 

odd name= "Def aultMembershipProvider " 

type= " System . Web . Providers . Def aultMembershipProvider , 
System. Web . Providers, Version=l . 0 . 0 . 0 , Culture=neutral , 
PublicKeyToken=31bf3856ad3 64635" 
connectionStringName=" Plane tWroxConnectionStringl " 
enablePasswordRetrieval= " false " enablePasswordReset= " true " 
requiresQuest ionAndAnswer= " false " requiresUniqueEmail= " false " 
maxInvalidPasswordAttempts= " 5 " minRequiredPasswordLength= " 5 " 
minRequiredNonalphanumericCharacters= " 0 " passwordAttemptWindow= " 10 " 
applicationName="/" 

/> 

< /providers > 
</membership> 


This provider configuration features a number of interesting attributes, which are described in the 
following table. The default values listed in the description column are applied when you don't spec- 
ify the associated attribute in the configuration file. 


ATTRIBUTE ^^^^^ 


c onne c t i onS t r ingName 

Points to the name of the connection string for the application. 

enablePasswordRetrieval 

Determines whether users are able to retrieve their current 
password. This option cannot be set when passwordFormat is 
Hashed {see passwordFormat). Defaults to false. 
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ATTRIBUTE 

DESCRIPTION 

enablePasswordReset 

Determines whether a user is able to request a new password. 
Defaults to true. 

requiresQuestionAndAnswer 

Determines whether controls like CreateUserWizard and 
PasswordRecovery have the user enter a security question 
and answer. Defaults to true. 

applicati onName 

Provides the unique name of the application. Defaults to a 
forward slash { / ) , but you can change it to support multiple 
websites using the same database with different accounts. 

requiresUniqueEmail 

Determines whether the system allows duplicate e-mail 
addresses for user accounts. When set to true, each user 
must provide a unique username and a unique e-mail address. 
Defaults to true. 

passwordFormat 

Determines the way passwords are stored in the database. It 
supports the following formats: 
Clear — Passwords are stored as plain text. 
Encrypted — Passwords are encrypted in a reversible format 
that enables the system to retrieve the clear text representa- 
tion of the password again. 

Hashed — Passwords are encrypted with an irreversible, one- 
way algorithm. When the passwordFormat is Hashed, users 
cannot retrieve their original passwords anymore. They can 
only request a new, auto-generated password. Defaults to 
Hashed. 

maxInvalidPasswordAt tempts 

Specifies the number of times a user can enter an invalid pass- 
word or invalid security answer before their account is locked. 
Defaults to 5. 

minRequiredPasswordLength 

Determines the minimum length of the password. Defaults to 7. 

rainRequiredNonalphanumer- 
icCharacters 

Determines the minimum number of non-alphanumeric charac- 
ters that must be included in the password. Defaults to i. 

passwordAttemptWindow 

Determines the time frame in minutes during which invalid 
password attempts are counted. Defaults to lo. 

pas swords tr engthRegularEx- 
pression 

Enables you to specify a custom regular expression to enforce 
a strong password. 


Check out the complete list of configuration settings for M embership on theM SDN website at 

http : //bit . ly/RFxQZT. 

In thefoiiowing Try It 0 ut, you see what it tai<es to reconfigure the M embership provider for the 
PianetWrox application by changing some of these attributes. 
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TRY IT OUT 


Configuring Membersiiip 


I n this short exercise, you see how to override the default behavior for the M embership provider in the 
Planet Wrox site to require users to enter a longer and stronger password. 

1 . 0 pen Web . conf ig and locate the <membership> element. 

2. C hange minRequiredPasswordLength to 7. 

3. C hange minRequiredNonaiphanumericcharacters to 1. When youYedone, your Configuration 
settings should lool< lil<ethis: 

<membership def aultProvider="Def aultMembershipProvider" > 
<providers> 

odd name= "Def aultMembershipProvider " 

type= " System . Web . Providers . Def aultMembershipProvider , 
System. Web . Providers , Version=l . 0 . 0 . 0 , Culture=neutral , 
PublicKeyToken=31bf3 856ad364e35" 
connectionStringName="PlanetWroxConnectionStringl " 
enablePasswordRetrieval= " false " enablePasswordReset= " true " 
requiresQuestionAndAnswer=" false" requiresUniqueEmail=" false" 
maxInvalidPasswordAttempts="5" minRequiredPasswordLength="7 " 
minRequiredNonalphanumericCharacters= " 1 " passwordAttemptWindow= " 10 " 
applicationName= " / " 

/> 

< /providers > 
</membership> 

4. Save all your changes and request signup. aspx in the browser. 

5. Fill in the form, but for both password fields, type something short lil<epass. 

6. Clicl< theCreate User button. Note that the 
control now forces you to enter a password 
with a minimum length of seven characters that 
contains at least one non-alphanumeric char- 
acter. It displays an appropriate error message 
below the control, shown in Figure 16-15. N ote 
that numbers are not considered non-alphanu- 
meric characters, so you need to mal<e sure your 
password contains at least one character lil<e # figure 16-15 
or $ or *. For example, password is not a valid 

password, but pass##word will be accepted. Also note that the password is case sensitive. 

7. Enter a password of at least seven characters with at least one non-alphanumeric character lil<e # 
or % and clicl< the Create User button again. This time your password is accepted and the account 
is created. 

How It Works 


Sign Up for Your New Account 


User Name: { ImarSpaanjaars 


Password: | 


Confirm Password: | 


E-mail: {imar@spaanjaars.com 


Password length minimum: 7. Non-alphanumeric characters required: 1. 


Create User | 


The createuserwizard uses the Configured M embership provider under the hood to validate the data 
and create the user. The provider in turn consults the web. conf ig file for the configuration information 
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such as the minimum password iength. When you try to create the user, the provider enforces the rules 
set in web.conf ig and canceis the user creation process as soon as one of the ruies is not fuifiiied. 

H aving the configuration information in web.config is especially useful when you deploy your applica- 
tion to a different server that uses a different database, because all you need to do is change the settings 
in this file. Chapter 19 and Appendix B show you how to do this. 


So far, you have seen how to let users sign up for an account so they can log in. But how can you 
differentiate between the different users in the system? H ow can you blocl< access to specific folders 
such as the Management folder for unauthorized users? You do this with the Role M anager, another 
application service that ships with ASP.N ET. 


THE ROLE MANAGER 

Although it's nice that your users can now sign up and log in to your site, it would be a lot more use- 
ful if you could differentiate among your users. That would enable you to grant access rights to one 
or just a few users to access the Management folder so only they can change your reviews and genres. 
With the Role M anager that ships with ASP.N ET, this is pretty easy to do. The Role M anager 
enables you to assign users to different roles. You can then use these roles to open or block specific 
functionality in your site. For example, you can blocl< access to the Management folder for all users 
except for those in the M anagers role. Additionally, you can display different content based on the 
roles users have with theLoginview as you saw earlier. 

The Role Manager Configuration 

As with membership, the settings for the Role M anager are placed in web.config files. The default 
settings added by N uGet when you installed the Universal Providers lool< likethis: 

<roleManager def aultProvider="Def aultRoleProvider" > 
<providers> 

< add name = " De f aul t Ro 1 e Provi de r " 

type=" System. Web . Providers .Def aultRoleProvider , System. Web . Providers , 
Version=l .0.0.0, Culture=neutral , PublicKeyToken=31bf 3856ad364e35 " 
connectionStringName="PlanetWroxConnectionStringl " 
applicationName="/" 

/> 

</providers> 
</roleManager> 

The Role M anager is not enabled by default, and to enable it, you need to add an enabied="true" 
attribute to the <roieManager /> element. In the next exercise, you seea way to enabletheRole 
M anager through the Web Site Administration Tool (W SAT). Just like M embership, the Role 
M anager uses a provider under the hood. 

Besides the settings shown here, the <roieManager /> element also has a few attributes you can 
configure. M ost of them are related to how the cookies with the role information are created and 
stored. For most cases, the default configuration should be fine, but check out the complete list of 
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configuration settings for tlie Roie M anager on tiie M SDN website at http://bit.iy/LmtmB3 if 
you iiavetlie need to furtiier configure tiie Roie M anager. 

Witii tiieM embersliip and RoieM anager providers configured and tlie database created, it'stimeto 
manage tile users and roies in your system. You iiave a few ways to accompiisli tiiat: 

>■ Using tile Web Site Administration Tooi, generaiiy referred to astiie WSAT 

>• Using IIS(tlieWindowsweb server) on recent Windows editions (you see more about tliis in 
Cliapter 19) 

> Programmaticaiiy, using tiie Roie M anager API (appiication programming interface) 

M anaging roies using tlie Roie M anager API is beyond tiie scope of tliis booi<. If you want to 
iearn more about it, get a copy of Wrox's Professionai ASP.N ET 4.5 in C#and VB (ISBN : 
978-1-118-31182-0). 

Tile Web Site Administration Tooi is used for a iot moretlian managing roies aione, and is discussed 
in detaii in tiie next section. It is oniy avaiiabiefrom your iocai maciiine as a menu sliortcut in VS. 
As sucli, it's great for setting up tlie initiai users and roies during deveiopment, but it isn't suitabie 
for managing users in a production environment. 

Managing Users with tlie WSAT 

Tiie WSAT sliips witii VS and is avaiiabiefrom tiie Website menu. Tiietooi is used for tiiefoiiowing 
tasi<s: 

>■ M anaging users 

>• M anaging roies 

>• M anaging access ruies— for exampie, to determine wiiat user can access wiiicii fiies and 
foiders 

>■ Configuring appiication, maii, and debug settings 

>• Tal<ingtlie site offline so users can't request any pages and get a friendiy error message 
instead 

Some of tlie clianges you mai<ewitli tiieWSAT are persisted in tlie web. configfiiefortiie appiica- 
tion. Otiier settings, iii<e users and roies, are stored in tiie database for tiie configured provider. 

In tiie next exercise you see iiow to start and use tiie WSAT. You see iiow to create a new roie and a 
new user, and iiow to assign tiiat user to tiie roie. 


TRY IT OUT 


Using the WSAT to Manage User Accounts and Roles 


To protect your Management foider from users tiiat are not autiiorized to access it, you need to create a 
roie tiiat is aiiowed to access tiiis foider. After you iiaveset up tiiis roie, you can grant aii users in tiiat 
roieaccessto tiie foider wiiiie i<eeping aii otiier users out. In tiiisTry It Out, you iearn iiow to create tiie 
M anagers roie and assign a user to it. In a iater exercise, you see iiow to iimit access to tiie Management 
foider to M anagers oniy. 
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1 . From within VS, clioose Website o ASP. N ET Configuration. Your browser opens and displays tine 
Web Site Administration Tool, shown in Figure 16-16. 


J ASP. Net Web Application Administration [ + || 


^ ^ Iocalhost49260/a5p.netwebadminfiies/default.aspx "^7 SJ' Google 


ASP 


Web Site .Administration Tool 


How do 1 use this tool? 


Home IT Security W Application Tf Provider 1 

It II ! 

Welcome to the Web Site Administration Tool 

Application:/ 

Current User IMame:VPC2012RTM\IMAR 


Security 

Application 
Configuration 

Provider Configuration 


Enables you to set up and edit users, roles, and access permissions for your site. 
Existing users: 3 

Enables you to manage your application's configuration settings. 

Enables you to specify where and how to store administration data used by your 


Web site. 


FIGURE 16-16 


2. In the top-right corner, you see a H elp linl< that takes you to a help file describing how you can use 
the tool. Right below the logo of the application, you see four tabs: H ome. Security, Application, 
and Provider. The H ome tab takes you back to the start page you see in Figure 16-16. You use 
the Application tab to configure different application settings, and the Provider tab enables you 

to reconfigure the chosen provider for the application. In this exercise, all that's important is the 
Security tab, so go ahead and click it. You should see the screen displayed in Figure 16-17. 

The bottom part of the screen is divided into three parts: Users, Roles, and Access Rules. You see 
how to use Users and Roles in this exercise. Access Rules is used to block or open up specific parts 
of your website to users or roles. You won't see how to use it in this chapter, but instead you learn 
how to change some of these settings in web.config directly in a later exercise. 

3. M ake sure that under Users, you see the Create User and M anage Users links. If you don't see them, 
but you see a note about W indows authentication instead, click the Select Authentication Type link, 
select From the Internet, and click Done. Your screen should now look like Figure 16-17. 

4. In the Roles section, click the Enable Roles link. The page reloads and now offers a link with 
the text Create or M anage Roles. Click that link to open the Create N ew Role page visible in 
Figure 16-18. 

5. Enter Managers as the new role name and click the Add Role button. You should seethe new role 
appear. Click the Back button at the bottom-right of the page to return to the main Security page. 

6. Click the Create User link in the Users section. You're taken to a page that enables you to enter the 
details for a new user and assign that user to the M anagers role at the same time. Type Manager 

as the username. As a password, enter something that meets the password rules you configured 
earlier. A password likeManager##i23 will do. Enter your e-mail address and then check the check 
box for the M anagers role name in the list of roles on the right. 
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7. Click Create User to add the user to the system and then click Continue on the confirmation page. 
At the bottom of the page, click the Back button so you reach the main Security page. 

8. On the Security page, click the M anage Users link. You are taken to a page that shows a list of all 
available users in the system, shown in Figure 16-19. 



You can use the Web Site Administration Tool to manage all the security settings for 
your application. You can set up users and passwords (authentication), create roles 
(groups of users), and create permissions (rules for controlling access to parts of your 
application). 

By default, user information is stored in a Microsoft SQL Server Express database in the 
Data folder of your Web site. If you want to store user information in a different 
database, use the Provider tab to select a different provider. 

Use the security Setup Wizard to configure security step by step. 

Click the links in the table to manage the settings for your application. 


Existing users: 3 
Create user 
Manage users 

Select authentication ty pe 


Roles are not enabled 

Enable roles 

Create or Manage roles 


Access Rules 


Create access rules 
Manage access rules 


FIGURE 16-17 


j i,,,.. ASP, Net Web Application Adminiitration | + | 


^ ([$1 localhost:49260/asp.netwebadminfilesAecunty/roles/m3nc ~ C 'J'l'' Google 


P It 



ASP 


Web Site Ad,T,i,iistratlon Tool 


Security Application Provider 


You can optionally add roles, or groups, that enable you to allow or deny groups of 
users access to specific folders in your Web site. For example, you might create roles 
such as "managers/' "sales," or "members," each with different access to specific 
folders. 


create New Role 


New role name: 


Add Role 


FIGURE 16-18 
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J LJ ASP.Net Web Application Administration | + | 
^ ^ localhost:49914/asp.netwebadminfik:/;ei: 


p, It n- 


To prevent a user from logging into your application but retain his or her information in your database, set the status to 
inactive by clearing the check box. 


Search for Users 


Search by: | User name v| for; | | | Find User | 

Wildcard characters * and ? are permitted. 

ABCDEEGHIJKLMNOPeRSTUVWXYZAil 


Active 

User name 



Roles 

0 

Imar 

Edit user 

Delete user 

Edit roles 



Imar Spaanjaars 

Edit user 

Delete user 

Edt roles 


0 

ImarSpaanjaars 

Edit user 

Delete user 

Edit roles 


0 

Manager 

Edit user 

Delete user 

Edit roles 



Create new user 


FIGURE 16-19 


From here you can edit, enable, disable, or delete existing users. For example, if you previously 
set Disabiecreateduser to True in the createuserwizard, you Can enable the user here by 
checking the check box in front of the username, visible in Figure 16-19. You can change the roles 
that are assigned to the user by clicking the Edit Roles link. Also, using the filter controls and the 
alphabet above the user list, you can quickly search for a specific user in case you're dealing with 
a lot of user accounts. 

9. To see where your user and roleended up, close the browser and go back to VS. On the Solution 
Explorer, double-click the pianetwrox.mdf database in theApp_Data folder to open it in the 
Database Explorer window. Then expand theTables node, right-click the Roles table, and choose 
Show Table Data. The role you created in step 5 should be listed. Open up some of the other tables 
such as Memberships and usersinRoies and inspect the data they contain. In the first table, you 
should see the user account you created in steps 6 and 7, and the latter table contains a relationship 
between the new role and user account. 

How It Works 

Just like the login controls, the W SAT eventually talks to the provider you configured in 
the Web. config file. In the case of the Planet Wrox application, it means it talks to the 

DefaultMembershipProvider and the Def aultRoleProvider, Which in tum talk tO a SO L Server 

Express LocalDB database identified by your connection string. The users and roles you create 
are stored in various tables in the database. Users that you create using the W SAT end up in the 
exact same location as those created with the createuserwizard control. In fact, the W SAT uses a 
Createuserwizard to Create new user accounts. This means that any user you enter in the W SAT is 
ableto log in using your standard Login. aspx page. In a later exercise, you use the M anager account 
you created in this exercise to log in to the site and access the Management folder. 
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To usethe roleyou created in this exercise, you liavea few options at your disposal. First, you can usetlie 
roie name to bioci< access to specific foiders in your web application tlirougli settings in tine web. config 
fiie. Secondly, you can usethe role in controls 11 l<e the Loginview to present different content to different 
users. Finally, you can use the Role API to checl< whether the current user is in a specific role. This gives 
you fine control over the content or functionality you can offer to certain privileged users. 


You see how to blocl< access to the Management folder and modify the Loginview in the next sec- 
tion; using the Role A PI is discussed in a later exercise. 


Configuring tlie Web Application to Work witli Roles 

On the Security page of the W SAT, you saw a section called Access Rules. This part of the tool 
enables you to block or open up resources in your site. It enables you to define rules such as "This 
folder is blocked for anyone except for users in the M anagers role," or "Anyone can access this file, 
except for the users in the M embers role and the Joe account." The tool is quite intuitive to use, so 
it isn't difficult to set up the different rules. H owever, it has one downside: it stores the security set- 
tings in separate Web. config files, one for each subfolder you configure. 

This makes it somewhat difficult to get an overview of all the different security settings. Fortunately, 
ASP.N ET also enables you to configure the same settings in the main web. config using <ioca- 
tion> elements. A <iocation> element has a path attribute that points to a file or folder you want 
to configure differently. You can usethe <iocation> element for many (but not all) other settings 
from Web. config as Well (for example, you could set the theme attribute of the <pages> element for 
the Management folder in the main Web. config). For the following exercise, you only set the child 
elements of <iocation> to those related to security. 


TRY IT OUT 


Blocking Access to the Management Folder 


0 bviously, you don't want just anyone to mess with the reviews and genres that you have posted on 
your website. Therefore, it's important to block access to the Management folder to anyone except site 
managers assigned to the M anagers role. In this exercise, you see how to modify web. config to block 
the folder so only the user account you assigned to the M anagers role earlier can access this folder and 
the files it contains. 

1 . Open the Web. config file at the root of the site. Scroll all the way down to the closing </conf ig- 
uration> tag and right before it type a <iocation> element. Adda path attribute to the element 
and set its value to Management. N ote that IntelliSense kicks in to help you complete the element 
and find the attribute. Complete the configuration by entering the following settings: 

<location path= "Management "> 
<system.web> 

<authorization> 

<allow roles= "Managers" /> 
<deny users="*" /> 
< /author! zation> 
</system.web> 
</location> 
</conf iguration> 
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2. Save and close the Web. config file. 

3. Open the main master page for the site (prontend. master) in Design View and scroll down to 
the end of the file. Select theLoginview control and open its Smart Tasl<s panel. At the top of the 
panel, click theEdit RoleG roups linl<, shown in Figure 16-20. 


This is a sample banner 


( asp:LQginView#LoginViewl | 
LoginViewll^J LoginView Tasks 


Logged in as [UserName | 


vll^ LoginViewTas 

I Edit RoleGroup 


I Anonyj ' 


I 


Opens the RoleGroup collection editor 


Administer Website 


in 


I 


g Design | ta ^lit *» Source [ |^ | <footer>] <asp:LoginVie>w#LoginView1 > 


0 


FIGURE 16-20 


4. In the dialog box that opens, clicl< the Add button to insert a new Roiecroup and then set the 
Roles property of this group to Managers, as shown in Figure 16-21. 


Add 


RoleGroup Collection Editor 


Managers properties: 


Remove 


J Misc 


I Managers 


OK 


Cancel 


FIGURE 16-21 


5. Clicl< OK to insert the RoleGroup and return to Design View. 

6. Still on the Smart Tasks panel of the Loginview, choose Roiecroup [o] - Managers from the 
Views drop-down list. This switches the current template of the control to the RoleGroup for 
M anagers, so you can add content that is visible only to M anagers. 

7. From the Standard category of theToolbox, drag a HyperLink control and drop it into the 

Loginview. Using the Properties G rid, set the Text property of this HyperLink to Manage Site 

and set the Navigateuri to -/Management/Default. aspx. (You Can usetheURL picker for the 
HyperLink by Clicking the small button with the ellipsis on it.) Switch to M arkup View and after 
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Manage Site Logout 


the closing tag of the HyperLink control, type the word or followed by a Loginstatus control 
that you can drag from theToolbox, or copy from the existing code in the LoggedinTempiate. 
Finally, wrap the HyperLink and Loginstatus in a pair of parentheses just as you did in the 

LoggedinTempiate. 

W hen you are ready, your Loginview should contain the following code: 

<asp : LoginView ID="LoginViewl" runat="server"> 

< / LoggedinTempiate > 
<RoleGroups> 

<asp : RoleGroup Roles= "Managers " > 
<ContentTemplate> 

(<asp iHyperLink ID="HyperLinkl" runat=" server" 

NavigateUrl= " -/Management /Def ault . aspx" >Manage Si te</asp : HyperLink> or 
<asp: Loginstatus ID= "LoginStatus2 " runat="server" />) 
</ContentTemplate> 
</asp : RoleGroup> 
</RoleGroups> 

8. Save all your changes and then request the homepage (Default .aspx) for the site in your browser. 
Verify that you are currently not logged in (checl< the footer of the page and, if necessary, clicl< the 
Logout linl<). 

9. Clicl< the Login linl< on the Menu or Treeview and then 
log in with the M anager account you created earlier in this 
chapter. M ake sure you don't checl< the R emember M e 
option. The page refreshes and now shows the M anage figure 16-22 
Site linl< in the footer of each page (see Figure 16-22). 

If you don't see the M anage Site and Logout linl<sin the footer region, close all browser windows, 
go bacl< to the W SAT (using Websiteo ASP.N ET Configuration in VS), and ensure the account 
you're using is assigned to the M anagers role. 

10. Clicl< theM anage Site I inl< to open theM anagement section of thewebsite. Copy the current URL 
of the page from the browser's address bar to the clipboard (it should be something lil<ehttp: // 

localhost:49666/Management/Def ault. aspx). Clicl< the Back button Of yOUr brOWSer tO gO 

back to the homepage and then click the Logout button in the footer. Close all open browser win- 
dows and open a new instance of your browser again. (You can do this from the Windows Start 
menu or Start screen or you can right-click a page in VS and choose View in Browser.) 

11. Paste the address you just copied in the address bar of the browser window and press Enter. 
Instead of going to an address like: 

http : / /localhost : 49666/Management/Def ault . aspx 

you are taken to the L ogi n page: 

http : / /localhost : 4 9666 /login. aspx?ReturnUrl=%2fManagement%2f Def ault . aspx 

Note that the page you initially requested (Management/Default, aspx) isnow appended to 
the query string. The forward slashes (/) in the address have been encoded to their U RL-safe 
counterpart — %2f — automatically. Log in with your M anager account and you should seethe 
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M anagement section appear again. N ext, iog out again, iog in witii one of tlie otiier accounts, and 
tiien try to access tlie Management foider again. Because tiiat account doesn't liave permissions to 
access tiiat foider, you're redirected to tiie Login page again. 

How It Works 

To see iiow tliis wori<s, you need to iooi< at a coupie of tilings. First, iooi< at tlie settings you added to 
tiieweb.configfiieto iimit access to tiie Management foider: 

<location path= "Management "> 
<system.web> 

<authorization> 

<allow roles="Managers" /> 
<deny users="*" /> 
< /author ization> 
</systetn.web> 
</location> 

W iien tiie ASP.N ET run time processes tiie request for a page, it ciieci<stiie various configuration 
fiies to see wiietiier tiie current user is aiiowed to access tiiat resource. For requests to fiies in tiie 
Management foider, it encounters tile ruieset in tiie <iocation> dement. It starts scanning tiie vari- 
ous allow and deny eiements w itii roles or users attributes to specify tiie users or roies tiiat are 
affected by tiieruie. Tiieroies and users attributes tai<e one or more roieor user names, separated 
by a comma. As soon as a ruie is found tiiat matciies, tiie scanning process is stopped and tiiat ruie is 
appiied. If no ruie is satisfied, access is granted! Tiierefore, it's important to end tiie ruie witii a deny 
ruie to bioci< aii otiier users tiiat iiaven't been granted access previousiy. 

If you'd add an authorization dement to tiieweb.config in tiie Management foider, tiie settings you 
appiy tiiere are iooi<ed at first because tiie security modd wori<s inside out. Tiiat is, it starts by scanning 
tiie web.conf ig fiie (if present) in tiie foider tiiat contains tiie requested page. If it doesn't find tiiefiie 
tiiere or it doesn't contain settings tiiat bioci< or grant access, it goes up in tiie foider iiierarciiy searcii- 
ing for configuration fiies witii autiiorization dements. In tiie previous exercise, tiie run-time found tiie 
settings in tiieweb.config fiie in tiie root tiiat weretiien appiied to tiie foider. 

W iien an unautiienticated user iogs in, tiie first ruie won't matcii because tiie anonymous user is not a 
member of tiie M anagers roie. Tiie user is tiien denied access because of tiiedeny ruie tiiat bioci<s aii 
users, indicated by tiie asterisi< (*). 

After you iogged in asa M anager and requested tiie same resource, tiie ruie set was scanned again. The 
run timetiien found the allow dement tiiat grants access to tiie M anagers roie and immediatdy iet 
you in. Tiiefinai ruie tiiat bioci<s access to aii otiier users was not even clieci<ed. In addition to specific 
roies or usernamesand tiie asterisi< (*) to refer to aii users, you can aiso use tiie question mari< (?) to 
refer to unautiienticated — or anonymous — users. So, for exampie, to iet any iogged-in user access tiie 
Reviews foider regardiess of tiie roietiiey are in, and bioci< access to aii otiier users, you can add tiie 
foiiowing <iocation> dement to your configuration fiie: 

<location path= " Reviews " > 
<system.web> 

<authorization> 

<deny users="?" /> 
</authorization> 
</system.web> 
</location> 
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This denies access to ali users tliat are not iogged in. Because of tliedefauit ruletliat grants access to 
tlie resource if the current user is not matclied by an eariier ruie, aii iogged-in users can successfuiiy 
access fiies in tlie Reviews foider. 

You can specify muitipie roies or usernames in tlie roies and user attributes by separating tliem witli a 
comma. 

It's important to understand liow tlieRoieGroups element of the Loginview worl<s. Although you can 
specify multiple RoieGroup elements that may all apply to a certain user, only the first that matches is 
displayed. Consider a user called Alex assigned to the role WebM asters and to the role M anagers and a 
web page with the following Loginview: 

<asp : Loginview ID="LoginViewl" runat="server"> 
<RoleGroups> 

<asp : RoieGroup Roles= "Managers" > 
<ContentTemplate> 

<! --Content for Managers here--> 
</ContentTemplate> 
</asp : RoleGroup> 

<asp : RoieGroup Roles="WebMasters" > 
<ContentTemplate> 

<! --Content for WebMasters here--> 
</ContentTemplate> 
</asp : RoleGroup> 
</RoleGroups> 
</asp : LoginView> 


With this code, the user Alex only sees the content of the first RoieGroup, even though he is also 
assigned to the WebM asters role. 

Programmatically Checking Roles 

Although it's easy to use the Loginview control to change the content a user isallowed to see at run 
time, this isn't always enough. At times, you need programmatic control over the data you are pre- 
senting based on someone's role membership. You can access information about roles for the current 
user in a number of ways. First of all, you can access the isinRoie method of the user property 
from the current pageor user control lil<ethis: 

VB.NET 

If User . IsInRole { "Managers" ) Then 

' This code runs for Managers only 
End If 

C# 

if (User . IsInRole ( "Managers" ) ) 
{ 

// This code runs for Managers only 

} 
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Alternatively, you can access the Roies class that contains a number of static methods that you can 
access directly. The following code is functionally equivalent to the previous example: 

VB.NET 

If Roles . IsUserlnRole ( "Managers" ) Then 

' This code runs for Managers only 
End If 

C# 

if (Roles . IsUserlnRole ( "Managers" ) ) 
{ 

// This code runs for Managers only 

} 

In addition to the isusennRoie method, the Roles class containsa lot of other methodsthat 
enable you to worl< with roles programmatically. For example, you can create and delete roles, 
assign users to and remove users from roles, and you can get a list of users that are assigned to a 
certain role. For more information about theRolesAPI, check outtheM SDN documentation at 
http://tinyuri .com/RoiesAPi4-5 or picl< up a copy of Professional ASP.N ET 3.5 Security, 
M embership, and Role M anagement with C#and VB by Bilal H aidar (Wrox, ISBN : 978-0-470- 
37930-1). Although thebool< targets ASP.N ET 3.5, you'll find that most topics discussed in that 
book still apply to ASP.N ET 4.5. 

In thefollowing exercise, you learn how to modify the photo albums page so users logged in as 
M anagers are able to delete pictures from a photo album. Other users won't be able to delete a pic- 
ture because the Delete button will be hidden for them. 


||jjym2^Q Checking Roles with IsUserlnRole at Run Time 

This Try It 0 ut uses a programmatic check for the user's role to hide or show the D elete but- 
ton. Although you could recreate this example by using a Loginview with different templates and 
RoieGroups, this exercise serves as an example of programmatic role checking. 

1 . Open Default .aspx from the photoAibums folder in M arkup View and right after the closing 
tag of the Listview control, enter two HTML breaks (you can use the br snippet) followed by a 
HyperLink control (you Can use the hyperlink Snippet). Set its ID property to EditLink and its 
Text property to Edit photo Album. You assign theNavigateuri programmatically in the next 
step. 

<br /xbr /> 

<asp: HyperLink ID="EditLink" runat=" server" Text="Edit Photo Album" /> 

2. Switch to Design View, select the Listview control, open up its Properties Grid, and switch to the 
Events tab. Double-click DataBound to set up a handler for that event. Inside the handler that VS 
created, add thefollowing code; 


VB.NET 


Protected Sub LisfViewl_DataBound (sender As Object, 

e As EventArgs) Handles ListViewl . DataBound 
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If Not String. IsNullOrEmpty (DropDownListl . SelectedValue) Then 

EditLink.NavigateUrl = String. Format ( 

"-/ManagePhotoAlbum. aspx?PhotoAlbumId={0} " , DropDovmListl . SelectedValue) 

EditLink. Visible = True 
Else 

EditLink. Visible = False 
End If 

End Sub 

C# 

protected void ListViewl_DataBound (obj ect sender, EventArgs e) 
{ 

if ( ! string. IsNullOrEmpty (DropDownListl . SelectedValue) ) 
{ 

EditLink.NavigateUrl = string. Format ( 

"-/ManagePhotoAlbum. aspx?PhotoAlbumId={0} " , DropDovmListl . SelectedValue) ; 
EditLink. Visible = true; 

} 

else 
{ 

EditLink. Visible = false; 

} 

} 

3. Open up ManagePhotoAlbum. aspx in the root of the Site and switch it to Design View. Select the 
Listview and open its Properties Grid. Switch to the Events tab and double-clicl< the itemcreated 
event to set up an event handler for that event. 

4. If you're using C#, add an imports/using statement for the system. web. security namespace at 
the top of the Code Behind file. A VB.N ET website imports this namespace by default. 

using System. Web . Security; 

5. Add the following code to the event handler that VS created: 

VB.NET 

Protected Sub ListViewl_ItemCreated (sender As Object, 

e As ListViewItemEventArgs) Handles ListViewl . ItemCreated 
Select Case e. Item. ItemType 

Case ListViewItemType.Dataltem 
Dim deleteButton As Button = 

CType (e. Item. FindControl ( "DeleteButton" ) , Button) 
deleteButton. Visible = Roles . IsUserlnRole ( "Managers" ) 
End Select 
End Sub 

C# 

protected void ListViewl_ItemCreated (object sender, ListViewItemEventArgs e) 
{ 

switch (e. Item. ItemType) 
{ 
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case ListViewItemType.Dataltem: 

Button deleteButton = (Button) e. Item. FindControl ( "DeleteButton" ) ; 

deleteButton. Visible = Roles . IsUserlnRole ( "Managers" ) ; 

break; 

} 

} 

6. Save all your changes and then request Defauit.aspx from the photoAibums folder in your 
browser by right-clicking it and then choosing View in Browser. If you're not logged in as a man- 
ager, click the Login link in the main Menu or Treeview, log in with the M anager account you cre- 
ated earlier in this chapter, and return to the Gig Pics page. 

7. Choose one of the photo albums from the drop-down list. The page reloads and shows the pictures 
in the photo album. 

8. Click the Edit Photo Album link at the bottom of the page. Figure 16-23 shows how each picture 
is still associated with a Delete button that deletes the picture when clicked, just as you saw in 
Chapter 14. Click the Delete button for a picture to confirm that it still works. 


Description: Charlotte Hatherley 
ToolTip: Charlotte Hatherley 

Description: Charlotte Hatherley 2 Description: Charlotte Hatherley 3 
ToolTip: Charlotte Hatherley 2 ToolTip: Charlotte Hatherley 3 



* 








Delete 






FIGURE 16-23 


9. Click the Logout link in the footer again and go to the Login page. Log in with an account you 
created earlier in this chapter that is not a member of the M anagers role. Go to the Gig Pics page 
again, select an album from the list and click the Edit Photo Album link. This time, you don't see 
Delete buttons, because the account you're logged in with is not assigned to the M anagers role. In 
the next chapter you see how to modify this page once more to also let owners of an album delete 
their own pictures. In addition, you'll see how to hide the Edit Photo Album link for users without 
edit permissions. 

How It Works 

M ost of the code in this exercise shouldn't be new to you. You have seen how you can delete items 
with the EntityDatasource and Listview controls. You also learned how to handle events such as 
ItemCreated (that fires for each item that is shown in the Listview control) and search for controls in 
an item using pindcontroi. 
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W hat's new in this example is the way you checi< whether the current user is a member of the 
M anagers roie: 

VB.NET 

Dim deleteButton As Button = CType (e . Item. FindControl ( "DeleteButton" ) , Button) 
deleteButton. Visible = Roles . IsUserlnRole ( "Managers" ) 

C# 

Button deleteButton = (Button) e . Item. FindControl ( "DeleteButton" ) ; 
deleteButton. Visible = Roles . IsUserlnRole ( "Managers" ) ; 

The IsUserlnRole method returns a booiean that indicates whether the current user is a manager. 
W hen the method returns True, it means that the visible property of the Button is set to True. W hen 
the method returns False, the button is hidden and the user is not abieto deiete pictures from the 
photo aibum. 


PRACTICAL SECURITY TIPS 

Thefoiiowing iist provides some practical security tips: 

>■ Although the concept of security is introduced quite late in the book, you shouldn't see it as 
an afterthought. To ensure that you create a solid and secure application, you should keep 
security in mind from the very early stages of your website development. Deciding whether 
you want to have areas that are accessible only to certain users, and whether you are going 
to force users into getting an account for your site before they get access is best done as early 
as possible. The later in the process you introduce these concepts, the more difficulties you'll 
face when integrating this functionality. 

>■ Try to group resources likeASPX pages under folders that represent roles in your system. 
Take, for example, the Management folder in the Planet Wrox website. All pages related 
to the management of your site are packed together in a single folder, making it very easy 
to block the entire folder with a single <i ocation> element in theweb.config file. When 
the files you want to protect are scattered throughout your website, you'll need more time 
to configure the application, and you'll end up with a cluttered view of the active security 
settings. 

>• When you create roles to differentiate between users on your website, try to limit the number 
of different roles your system has. You'll find that your system becomes much easier to man- 
age with only a handful of logically grouped roles than with a large number of roles with 
only one or two users in them. 
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SUMMARY 

You can implement security in your ASP.N ET site witli several techniques, including Windows 
authentication (where the web server tal<es care of authentication) and Forms authentication, which 
isthedefacto standard for many of today's ASP.N ET websites. 

In general, security encompasses three important concepts: identity, authentication, and authoriza- 
tion. Together, they determine who you are and what you are allowed to do. 

The M embership service (that uses a M embership provider under the hood) enables you to cre- 
ate and manage users in a central database using handy controls such as createuserwizard, 

PasswordRecovery, and Login. 

TheRoleM anager (which usesa Roleprovider under the hood) enables you to group usersin vari- 
ous roles to which you can apply permissions. You can checl< roles programmatically, or use the 
Loginview to present different data depending on the role the user is assigned to. 

Users and roles are managed with the W SAT, so you can assign user accounts to different roles, as 
you saw in this chapter. You can then open up or block specific resources in your website to mem- 
bers in a certain role using simple <iocation> elements in theweb.config file. 

The various login controls enable you to customize the content that users get to see. In the next 
chapter you discover how to tal<e this one level further, by creating dynamic pages that adapt based 
on the user that is accessing them. 


EXERCISES 


1 . What's the difference between authentication and authorization? 


2. Right now the Management folder is blocked for all users except those in the Managers role. What 
change do you need to make to the web . conf ig file if you also want to open up the folder for the 
user John and all people in the Editors role? 

3. Imagine you have a website that features a Login page with a single Login control. What change 
to the Login control do you need to make to send users to MyProf iie . aspx in the root after they 
log in? 

4. What's the difference between the Loginview and Loginstatus controls? When would you use 
each one? 


You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 

Application services A set of ASP.NET services that you can access from your website to handle 
tasks such as membership, role, and profile management 

Authentication The process of proving your identity to a system 

Authorization The process of determining the permissions a user has in a system 

Login controls The set of security controls that ship with ASP.NET and that enable you to 

sign up, log in, recover your password, and more 

Membership One of the ASP.NET application services that handles membership-related 

tasks (including creating users, logging in, and more) 

Permissions Determine the operations a user in the system is allowed to carry out 

Provider model A model where an interchangeable piece of software is used for certain 

application tasks. Through configuration, you can assign a different piece of 
software that handles the same tasks (but in a different way). 

Role Manager One of the ASP.NET application services that handles role-related tasks 

including creating roles, assigning users to roles, and checking their role 
membership 


Personalizing Websites 


WHAT YOU WILL LEARN IN THIS CHAPTER: 


>• Details about the Profile feature that ships with ASP.NET 

>• How to create and consume a user's profile in a website 

>" How you can recognize your users and how to serve them custom- 
ized content 

>• How you can access the profile of other users of your site 
WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 
www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the Chapter 17 download. 

There is only one thing that beats good content on the web— good personalized content. In the 
era of information overload and the huge amount of competitive sites, it's important to know 
your visitors and understand the possibilities you have to present them personalized content. 
With a good personalization strategy, you can create a website that lives up to your users' 
expectations by presenting them with exactly the data they are looking for. Personalization 
is useful for many different scenarios. For example, on a sports site, you use personalized 
content to highlight activities from the user's favorite team. On a site that deals with program- 
ming, you can personalize content by showing users examples in their preferred programming 
language(s) only. 0 n a news website, you can let users choose one or more news categories 
(World, Local, Sports, Business, Financial, and so on) and target the content you show them 
based on these preferences. You can take this one step further by sending them e-mail updates 
when a new article is posted in one of those categories. 

However, personalization goes further than just storing personal preferences and adapting 
the content to these preferences. W ith personalization, you can also keep track of other user 
details, such as a name, date of birth, visits to the site, items users bought in an online shop, 
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and so on. You can then use these details to further personalize web pages, creating a closer rela- 
tionship with your visitors. 

In the Planet Wrox website, personalization is implemented simply yet effectively. The main Reviews 
page is designed to show only the reviews for those music genres in which the user is interested. To 
see all the available reviews, users can still visit theAii .aspx page, but by visiting the personalized 
page, they only see reviews in music genres they really lil<e. 

Additionally, users can enter personal details about themselves, such as a first and last name, and a 
short biography. Thesedetails areshown on the Photo Albums details page so you know who cre- 
ated a particular photo album. 

To enableyou to add personalization features to a website, ASP.N ET 4.5 ships with an application 
service called Profile. With the Profile service, you can store data for a particular user with very few 
lines of code. 

By the end of this chapter, you'll have enough knowledge about the personalization features brought 
by Profile to create dynamic and personalized websites. 


UNDERSTANDING PROFILE 

The ASP.N ET Profile is another application service that ships with ASP.N ET. It enables you to store 
and retrieve information about users to your site that goes beyond basic information such as an 
e-mail address and password that users can enter during sign-up. With Profile, you can store infor- 
mation such as a first and last name, a date of birth, and much more, as you see later in this chap- 
ter. By keeping track of the user to which that data belongs, ASP.N ET is ableto map that data to a 
user the next time she visits your site, whether that be minutes or weeks later. The cool thing about 
Profile is that it enables you to store data for registered users as well as anonymous users. So, even if 
your visitors haven't signed up for an account, you can recognize them and store information about 
them. 

You access the information in a user's profilethrough a clean API with virtually no code. All you 
need to do is define the information you want to keep track of in the central web.config file and 
the Profile service takes care of the rest. All interaction with thedatabaseto retrieveor store profile 
information in the database is handled automatically for you. 

Enabling Profile in your web application is a simple, two-step process: 

1, Define the information you want to store for a user in the web.config file. Based on this 
information, the ASP.N ET run time generates and compiles a class for you on the fly that 
gives you access to the properties you defined. It then dynamically expands a property called 
Profile on all web pages in your site , so you can easily access the profile properties from 
every page in your site. 

2. In your application, you program directly to this generated class to get and store the profile 
information for the current user. 

The ASP.N ET Profile by default is connected to a logged-in user, although you can also save profile 
data for unauthenticated users, as you will see later in this chapter. 


Understanding Profile | 645 


In the following section, you see how to define profile properties in web.conf ig and how to access 
them in your web pages. 


NOTE It's important to realize that the built-in Profile feature works only with 
Web Site Projects and not with Web Application Projects. For a discussion on 
the difference between the two, refer to Chapter 2. If you find that none of the 
examples in this chapter seem to work, check that you haven't accidentally cre- 
ated a Web Application Project. The simplest way to check is to look at the Code 
Behind file of a Web Form. If you see two Code Behind files (one named after the 
page with a . cs or .vb extension and one with an additional Designer exten- 
sion), you have created a Web Application Project. In that case, get yourself 
a copy of the chapter 16 folder that is part of the source that comes with this 
book and use that as the starting point for this chapter 


Configuring tlie Profile 

You define a profile for your website in theweb.conf ig file by creating a <prof iie> element as 
a direct child of the <system.web> element. Between the <profiie> tags, you need to create a 
<properties> element that isused to define the properties you want to expose from your profile 
object. Two types of properties exist: simple properties and complex properties, referred to as profile 
groups. 

Creating Simple Profile Properties 

You define simple properties as direct children of the <properties> element using an <add> ele- 
ment. The following example demonstrates how to create a property that can be used to hold a 
user's first name and one to hold a date of birth. Thepi rstName property can be accessed and set 
for authenticated and anonymous users, whereas the DateofBirth property is accessible only to 
logged-in users: 

<system.web> 

<prof ile> 

<properties> 

odd name="FirstName" allowAnonymous="True" /> 
<add name="DateOfBirth" type="System.DateTime" /> 
</properties> 
</pro£ile> 

Because properties are by default of type system. string, there's no need to define an explicit 
type on the property for text-based properties lil<e a first name. H owever, for other types lil<e 
a DateTime, a Boolean, an Integer, or your own types, you need to define the type explicitly 
using the type attribute and its fully qualified name including its namespace, as shown for the 
DateofBirth property. The following table lists the most common attributes of the <add> element 
that influence the properties of a profile. 
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ATTRIBUTE 

DESCRIPTION 

name 

Defines the name of the property, such as FirstName, DateOf Birth, 
and so forth. 

type 

Sets the full .NET type name of the property, such as System, string. 
System . Boolean, System. DateTime, System. Int32 (an Integer in 
VB.NET and an int in C#), and so on. 

all owAnonymou s 

Specifies whether the property can be written to for anonymous users. 
The default is false. When you set this attribute to true, you also need 
to enable anonymousidentif ication, discussed later in this chapter. 

def aultValue 

Defines the default value for the property if it hasn't been set explicitly. 
When you leave out this attribute, the profile property takes the default 
value for the underlying type (for example, null for a string, 0 for an 
int32, and so on). 

readonly 

Specifies whether the profile property can be changed at run time. 
The default is false, which means you can read from and write to the 
property. 


Besides simple properties, you can also create profile groups that enable you to group other simple 
properties together. 

Creating Profile Groups 

Profile groups serve two distinct purposes: first, they enable you to logically group related proper- 
ties. For example, you can create a group called Address that, in turn, has properties like street, 

PostalCode, and City. 

Groups also enable you to have properties with the same name, but located in a different group. 
For example, you can have two groups called visitAddress and postaiAddress that both feature 
properties 11 l<e street and postaicode, making it easier for a developer using your profile object 
to find the relevant information. 

To create a profile group, you add a < group > element to the <propert ies> element of your profile 
and then specify a name. The<group> element then contains one or more properties. The following 
example shows a profile group for a postaiAddress: 

<properties> 

<add name="FirstName" /> 
<group name="PostalAddress"> 
odd name=" Street" /> 
<add name="PostalCode" /> 
<add name="City" /> 
<add name="Country" /> 
</group> 
</properties> 
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You can have multiple groups within the <properties> tags, but you can have only one level of 
groups. This means that you can't nest a <group> element In another <group> or <add> element. 

Using Non-Standard Data Types 

In addition to thedata types listed earlier such as string, DateTime, and int32, you can also use 
your own types (defined In theApp_code folder, for example). 

As with the bullt-ln .N ET types, you need to refer to your type using Its fully qualified name, which 
Includes the namespace and the class name. Imagine that you have a type called preference that 
contains various properties (Implemented as automatic properties In this example) related to the 
user's preference. To Include this type In the profile, you need to wrap It In a namespace first: 

VB.NET 

Namespace PlanetWrox 

Public Class Preference 

Public Property FavoriteColor As String 
' Other properties go here 
End Class 
End Namespace 

C# 

namespace PlanetWrox 
{ 

public class Preference 
{ 

public string FavoriteColor { get; set; } 
// Other properties go here 

} 

} 

You then refer to the type In an <add /> element as follows: 

<add name=" Preferences" type= " PlanetWrox . Preference" /> 

A situation where you need a different syntax to refer to a type In the profllesetup Is when you are 
using generics. Chapter 5 discusses how to use generics to store role names using a List of strings. 
Here's a quick refresher of the code you saw In that chapter: 

VB.NET 

Dim roles As New List (Of String) 

roles .Add ( "Members" ) 
C# 

List<string> roles = new List<string> ( ) ; 
roles .Add ( "Members" ) ; 


To give your profile a property that Is of a generic List type, you need to use some special syntax. 
The following setting In web.conf ig creates a profile property called Favoritecenres that stores 
the user's favorite genres as a List (of integer) In VB.N ET and as a List<int> In C* 
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<add name="FavoriteGenres" 

type=" System. Collections . Generic . List "1 [System. Int32] " /> 

The first part of the type attribute iooi<s quite normal. The List class lives in the system 
.Collections. Generic namespace SO it mal<es sense that you need to specify that hereaswell. 
H owever, right after the class name (List) you see "i. This is not a typo, but the .N ET way to refer 
to generic types in plain text. To define a property that is based on a generic type, you need to use 
the bacl< ticl< (") followed by a i. The back ticl< is usually found to the left of the 1 key on your key- 
board. The "1 is then followed by a pair of square brackets that contains the actual type you want 
to use for the list. The type specified in the Favor iteGenres profile property maps to theseVB.N ET 
and C# counterparts: 


VB.NET 

Dim FavoriteGenres As New List (Of Integer) 
C# 

List<int> FavoriteGenres = new List<int> ( ) ; 

You see how to make use of this and other profile properties in the following exercises. First, you 
learn how to configure Profile in web.conf ig in the next Try It Out. Later exercises show you how 
to work with these properties, and how to usethe various methods of the List class. 

^^^^^^Q Creating a Profile 

In this Try It Out, you see how to create a profile that is capable of storing a user's first and last name, 
a date of birth, a short biography, and a list of IDs of the user's favorite genres. This list is later used to 
show only the reviews that match the user's interest. 

1. Open the Web.conf ig file from the root of the site and locate the <prof iie> element that was 
added by N uGet in an exercise in the preceding chapter. If you don't have this element yet, refer to 
the section "Introducing the Login Controls" in Chapter 16 to learn how to configure your site for 
the application services. 

2. Add a new <properties> element as a direct child of <prof iie>. M ake sure you don't acciden- 
tally add the new element inside the <providers> element. 

3. Complete the <profiie> element so it ends up looking like this: 

<prof ile def ault Provider =" Default Prof ileProvider" > 
<properties> 

odd name="FirstName" /> 
odd name="LastName" /> 

<add name="DateOf Birth" type="System.DateTime" /> 

<add name="Bio" /> 

<add name="FavoriteGenres" 

type="System. Collections .Generic .List~l [System. Int32] " /> 

</properties> 

<providers> 

</prof ile> 

4. Save the web . conf ig. As soon as you save the file, a background process starts to generate a class 
file that is used for the profile. After the class file has been created and compiled successfully, you 
can access it programmatically through the profile property of the Page class. 
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5. To test the profile, open the Myprofiie.aspx file that you created in the previous chapter in 

Design View. Double-clicl< the page to set up an event handler for the Load event and add the fol- 
lowing code containing your own first and last name: 

VB.NET 

Protected Sub Page_Load {sender As Object, e As EventArgs) Handles Me . Load 
Profile. FirstName = "Your first name here" 
Prof ile.LastName = "your last name here" 

End Sub 

C# 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

Profile. FirstName = "Your first name here"; 
Profile. LastName = "Your last name here"; 

] 

As soon as you type the dot (.) after profile, an Intel 11 Sense list appears, showing you the avail- 
able profile properties (see Figure 17-1). 


Protected Sub Page_Load(sender 

As Object, e As EventArgs) Handles Me. Load 

Profile-I 

End Sub 
End Class 

> |Bio 

1 ^ Public Overridable Property Bio As String 


>• Context 



> DateOfBirth 



A FavorrteGenres 



> FirstName 



0 GetProfile 



0 GetProfileGroup 



© GetProperty Value 



$ Initialize 



Common All 



FIGURE 17-1 


6. When you are finished typing the code, save and close the file because you're done with it for now. 


WARNING If nothing shows up after typing the dot, choose Build O Build Web 
Site from the main menu or press Ctrl+Shift+B. This forces VS to start a recom- 
pilation of the application, including the special class for the Profile property. 
You see more about compilation in Chapter 19. After a delay of a few seconds, 
the properties should now appear in the IntelliSense list for the Profile prop- 
erty of the Page class. If they still don't show up, check the Error List (choose 
View O Error List from the main menu to open up the Error List) to verify that you 
didn't make any mistakes in the web . conf ig file and make sure you are using a 
Web Site Project and not a Web Application Project. 


7, Switch bacl< to the web. conf ig file and scroll all the way to the end. Create a copy of the <ioca- 
tion> element that blocks access to the Management folder for unauthorized users and paste it 
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right below the existing element. Then modify the copy so it blocks access to theMyProfiie.aspx 
file in the root of the site to all unauthenticated users. You should end up with these settings: 

</location> 

< location path="MyProf ile. aspx"> 
<system.web> 

<authorization> 

<deny users="?"/> 
< /author ization> 
</system.web> 
</location> 
</conf iguration> 

8. In the Solution Explorer, right-clicl< theMyProfiie.aspx file and chooseView in Browser. You 
can only view this file when you're logged in; if you weren't logged in previously, you are taken to 
Login, aspx first. Log in with the usernameand password you created in the previous chapter and 
click Login. You're taken back to Myprof iie.aspx. Although you don't see anything new in the 
page, the code in page_Load has run and has created a profile for you in the database. 

9. To see this profile, close your browser and go back to Visual Studio. Open the Database Explorer 
(the Server Explorer in paid versions of VS) and expand the Tables element of the pianetwrox 
.mdf database. Locate the Profiles table, right-click it, and choose Show TableData. You should 
see something similar to Figure 17-2. 
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FIGURE 17-2 


This figure shows the profile data for a single user. The first and last name you entered in step 5 
are stored in the column propertyvaiuestrings. Because of the special format this data is stored 
in, you shouldn't modify this data manually. Instead, you should use Profile to change the under- 
lying data. 

How It Works 

W hen you define profile properties in web.config, the ASP. N ET run time creates a class for you in the 
background. This class, called prof iiecommon, gives you access to the strongly typed properties such 

as FirstName, LastName, and FavoriteGenres. The Prof ileCommon ClaSS isthen made aCCeSSible tO 

the Page through its profile property, profiiecommon inherits from profiieBase, the base class 
defined in the .N ET Framework that contains the behavior to access the profile in the database by talk- 
ing to the configured provider, theASP.N ET Profile provider. The provider in turn takes care of all the 
hard work of persisting the data in the configured database. Just as the M embership and Roles provid- 
ers you saw in the preceding chapter, the Profile provider uses the connection string defined in the con- 
nectionstringName attribute of the Configured provider. 
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To define properties, you use <add> dements witli a name attribute and an optionai type if tlie property 
is of a typeotiier tiian system, string. For exampie: 

<add name="FavoriteGenres" 

type=" System. Collections . Generic . List ~1 [System. Int32] " /> 

TIlis property sets up a iist tiiat can store integer vaiues to lioid tiie user's favorite music genres. You 
see iiow to usetiiis property in a iater exercise. 

After you iiaveset up tiie profiie in web.conf ig and tlie baci<ground ciass iias been compiied, you can 
access tiie profiie in your pages. For exampie, you can now set properties sucii as FirstName tiirougii 
code: 

VB.NET 

Prof ile . FirstName = "Your first name here" 
C# 

Prof ile . FirstName = "Your first name here": 

Aitliougii not used in tiiis exercise, you access properties in a group in pretty mucii tlie same way. Aii 
you need to do is prefix tlie property name witii tlie group name and a dot. Given the exampie of a 
postaiAddress, you wouid store tlie street for tliat address iii<e tliis: 

VB.NET 

Prof ile . PostaiAddress . Street = "Some Street" 
C# 

Prof ile . PostaiAddress . Street = "Some Street"; 

Ciianges madeto tlie profiie are saved automaticaiiy for you during EndRequest, an event tii at fires 
very iate during tiieASP.N ET page iife cycie. Tliis way, you can ciiange tiie profiie during many of tiie 
stages of tiie iife cycie witliout iiaving to worry about expiicitiy saving tiie profiie manuaiiy. 

In Figure 17-2, you can see iiow a singie row is used to store tiie entire profiie. Tiie first coiumn contains 
the unique ID of the user to wliicli tiie profiie beiongs. Tlie second coiumn contains a iist of property 
names tliat are saved for tiie current user, togetiier witii a starting index of tiie vaiue and a iength. For 
exampie, for the iast name you see: 

LastName :4 : 10 

Tiiis states tiiat tlie vaiue for the LastName property, Wilicil is stored in the PropertyValueStrings 

coiumn, starts at position 4 (tiiefiftli cliaracter because zero-based positions are used) and iiasa iengtii 
of 10 ctiaracters. Tliis dense format enabies tiie Profiie provider to store many different properties 
in a singie coiumn, wiiicli eliminates tlie need to mess witii tiiedatabase scliema any timetlie profiie 
ciianges. Earlier versions of the Profile provider used the propertyvaiueeinary column to store binary 
objects such as images. H owever, the Profile provider converts these to strings and stores them in the 

PropertyValueStrings COlumn aSWell. 


You learn more about reading from and writing to the profile in the following section. 
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Using the Profile 

As you saw in the previous section, writing to tlie profile is easy. To cliange a property lil<e 
FirstName, all you need isa singlelineof code. The profile keeps track of the changes you have 
madeto it, and, if necessary, automatically saves the changes during EndRequest. Reading from the 
profile is just as easy; all you need to do is access one of its properties. The following snippet shows 
how to fill a TextBox with the first name from the profile: 


VB.NET 

FirstName . Text = Prof ile . FirstName 
C# 

FirstName . Text = Prof ile . FirstName; 

Retrieving properties in a group is almost identical. To access the street property discussed in a 
previous example, you need this code: 


VB.NET 

PostalAddressStreet . Text = Prof ile . PostalAddress . Street 
C# 

PostalAddressStreet .Text = Prof ile . PostalAddress . Street ; 


Accessing the Favoritecenres property is slightly different. Because this property isa collection, 
you shouldn't assign a value to it directly. Instead, you use its methods and properties to get data in 
and out. The following example clears the entire list first, and then addsthelDsof two genres to it: 


VB.NET 

Profile . FavoriteGenres . Clear ( ) 
Profile . FavoriteGenres .Add (7) 
Profile . FavoriteGenres .Add (11) 

C# 

Profile . FavoriteGenres . Clear ( ) 
Prof ile . FavoriteGenres .Add ( 7) ; 
Profile . FavoriteGenres .Add (11) 


The following exercise shows you how to store basic data in the user's profile. You see a real-world 
implementation of using the FavoriteGenres list in a later exercise. 


TRY IT OUT 


Storing Basic User Data in the Profile 


In this Try It Out, you modify the Profile page so users can save their first and last name, birthday, and 
a short biography in their profile. 

1. Open MyProfiie.aspx again and switch to Code Behind. Remove the two lines of code in page_ 
Load that set the first and last name. 

2. Switch to Design View and position your cursor between the paragraph and the changepassword 
control. To position your cursor, click the changePassword control once to select it, and then 
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press the left arrow key once. N ext, add an H TM L table of five rows and three columns by choos- 
ing Table o Insert Table. 

3. In the second column of each of the first four rows, drag Textsox controls and rename them, from 
the first to the last row, FirstName, LastName, Dateof Birth, and Bio by Setting their ID attribute. 
Figure 17-3 shows you exactly where the TextBox controls should be placed. 

4. In the first column of each of the first four rows, drop Label controls and set their properties as 
follows so each label is associated with a TextBox in the same row. 


TEXT 

ASSOCIATEDCONTROLID 

First name 

FirstName 

Last name 

LastName 

Date of birth 

DateOfBirth 

Biography 

Bio 


5. In the second cell of the fifth row, drag a Button and set its id to saveButton and its Text to 
Save Profile. Design View should look like Figure 17-3. 

MyProfile.aspx.vb BBB8B^^^3 
J cpMainContent (Custom)! 

My Profile 

The \ly Profile page allows you to make changes to your perscmal profile. For now, all you can do is change your password below. 

First name .j 
Last name : [ 

Date of birth | 
Biography 'asp:buttQngSaveBulton| 

Save Profile ^ 

I Change Your Password 
Peissword \ * 
New Password: [ « 
Confirm New Password | * 
The Confirm New Password must match tiie New Password entr\'. 
Change Password | Cancel | 

Select a Theme 
I Monochrome ▼! 
i 

I s Design | m Split " Source 
FIGURE 17-3 


MasterPages/Frontendjnaster 


[7| I <a5p:Content#Content2 > | [<table.auto-style1 > 1 1 <tr> | ["<td>] <asp:Button*SaveBuKon> [►] 


6. In the last column of each of the first three rows, drag Requiredpieidvaiidator controls. Set 
their properties as follows, so each validator lines up with a xextsox in the same row. Remember: 
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you can set the Display property for all controls at once by selecting the controls while pressing 
the Ctrl l<ey. 


CONTROLTOVALIDATE 

DISPLAY 

ERRORMESSAGE 

FirstName 

Dynamic 

First name is required. 

LastName 

Dynamic 

Last name is required. 

DateOf Birth 

Dynamic 

Date of birth is required. 


7. N ext to the validator for the Dateof Birth box, drag a comparevaiidator and set its properties as 
follows; 


PROPERTY 

VALUE 

Display 

Dynamic 

ErrorMessage 

Please enter a valid date. 

Cont r o 1 ToVa 1 i da t e 

DateOfBirth 

Operator 

DataTypeCheck 

Type 

Date 


8. Set the TextMode of the bIo control to MuitiLine and set its Height and width properties to vspx 
and 3oopx, respectively. 

9. M odify the text above the table to indicate that users can now do more than just change their pass- 
word alone. Your Design View should lool< lil<e Figure 17-4. 


MyPfofile.aspx" -e X 


MyProfile.aspx.vb 


MasterPages/Frontendjnaster 


cpMainContent (Custom)l 

My Profile f 

The My Profile page allows you to make changes to your personal profile. Besides changing your password, you can 
also tell us a bit about yourself 

First name : 

First name is required. 

Last name 
Date of birth 

Biography 

Last name is required- 

Date of birth is required Please enter a \-alid date. 

i 


Save Profile 



S Design | s Split j " Source | [7| | <asp:Content#Content2 >] <asp;ChangePassword#Chang.., 


FIGURE 17-4 
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10. Double-click the Save Profile button and in the click event handler that VS added for you, write 
the following bolded code: 

VB.NET 

Protected Sub SaveButton_Click (sender As Object, 
e As EventArgs) Handles SaveButton . Click 
If Page.IsValid Then 

Prof lie . FirstName = FirstName.Text 
Profile.LastName = LastName.Text 

Prof lie .DateOfBirth = DateTime. Parse (DateOfBirth. Text) 
Profile. Bio = Bio. Text 
End If 

End Sub 

C# 

protected void SaveButton_Click {obj ect sender, EventArgs e) 
{ 

if (Page.IsValid) 
{ 

Prof ile . FirstName = FirstName.Text; 
Profile.LastName = LastName.Text; 

Prof ile .DateOfBirth = DateTime. Parse (DateOfBirth. Text) ; 
Prof ile. Bio = Bio. Text; 

} 

} 

11. In the page_Load event handler of the same page, add the following code, which fills in the text 
box controls with the data from the profile when the page loads: 

VB.NET 

Protected Sub Page_Load (sender As Object, e As EventArgs) Handles Me. Load 
If Not Page. IsPostBack Then 

FirstName.Text = Prof ile . FirstName 
LastName.Text = Profile.LastName 

DateOfBirth. Text = Prof ile. DateOfBirth. ToShortDateString () 
Bio. Text = Profile. Bio 
End If 

End Sub 

C# 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

if (! Page . IsPostBack) 
{ 

FirstName.Text = Prof ile . FirstName; 
LastName.Text = Profile.LastName; 

DateOfBirth. Text = Prof ile. DateOfBirth. ToShortDateString () ; 
Bio. Text = Profile. Bio; 

} 

} 

12. Save all changes and request the page in the browser. If you're required to log in first, enter your 
details and clicl< the Login button. Y ou should see the M y Profile page reappear with the data you 
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entered for the first and last names in tlie previous Try It Out already filled in. In addition, the date 
of birth field is filled with the default value for a DateTime: 1/1/0001. Complete the form with 
your details and clicl< the Save Profile button. 

13. Close your browser and request Myprofiie.aspx again. N ote that your changes have been per- 
sisted between the two browser sessions. 

How It Works 

M uch of what you have seen in this exercise should be familiar by now. The page contains a number 
of TextBox controls that are validated using RequiredPieidvaiidator and comparevaiidator Con- 
trols. Additionally, the Label controls are hool<ed up to their respective TextBox controls using the 
AssociatedcontroiiD property. This mal<es it easy to put focus on the controls in the browser because 
clicl<ing a Label now puts the cursor in the associated TextBox. 

W hen you clicl< the Save Profile button, the values are retrieved from the four TextBox controls and 
stored in the profile. W hen the page loads the first time, the reverse of this process tal<es place: the 
controls are prefilled with the values from the profile. To avoid overwriting the data that the user has 
entered, the code gets the data from the profile only when the page initially loads, and not during a 
postbacl<: 

VB.NET 

If Not Page . IsPostBack Then 

FirstName . Text = Prof ile . FirstName 

End If 
C# 

if (! Page . IsPostBack) 
{ 

FirstName . Text = Prof ile . FirstName ; 


Although the example itself is pretty trivial, it lays out a nice foundation for a more advanced sce- 
nario using the List of integers to store the user's preference for certain music genres. You can then 
use this list of favorite genres to limit the list with reviews to those the user is really interested in. 
You see how to store the user's preference in Profile in the following exercise; a later exercise shows 
you how to use the saved data again. 

^^^^^^Q Storing Genre Preferences in the Profile 

In this Try It Out, you learn how to fill the Favoritecenres property of the user profile. To let the user 
choose her favorite genres, you display a checkBoxList that is hool<ed up to an EntityDatasource 
that retrieves the available genres. W hen the user saves the data, the items that the user checl<ed are 
then stored in the profile. 


Understanding Profile | 657 


1. In MyProfiie.aspx, add a table row above the one with the Save Profile button. To do this, make 
sure you're in Design View, right-clicl< an empty spot in the row with the button, and choose Insert 
o Row Above from the context menu that appears. Alternatively, clicl< the cell to put the cursor in 
it and press Ctrl+Alt+up arrow. 

2. In the second cell of the new row, drag a checkBoxList control from the Standard category of the 

Toolbox and set its id to PreferenceList. 

3. In the first cell, drag a Label control, set its Text to Favorite genres and its 

AssociatedControlID tO PreferenceList. 

4. H ook up the checkBoxList control to a new EntityDatasource as follows. Click Choose Data 
Source on the CheckBoxList control's Smart Tasks panel. Choose <M ew data source>from the 
data source drop-down list, then choose the Entity data source type and click OK. In the Configure 
Data Source wizard for the new data source control, choose pianetwroxEntities as the Named 
Connection, click N ext, and choose Genres as the EntitySetN ame. In the Select list, check only 

the items for the id and Name properties. Your Configure Data Source dialog box now looks like 
Figure 17-5. 


Configure Data Source - EntityDataSourcel 


1 

^lS^ Configure Data Selection 


EntitySetName 


1 Genres v | 


Entity TypeFi Iter: 


1 (None) V 




Choose the properties in the query result 


□ Select All (Entity Value) 
0 Id 

□ SortOrder 


r~l Enable automatic inserts 
I I Enable automatic updates 
I I Enable automatic deletes 


FIGURE 17-5 


5. Click Finish to close thedialog box. Back in theData Source Configuration Wizard for the 
CheckBoxList control, choose Name as the data field to display and id as the data field for the 
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value. If these items don't appear in the drop-down lists, click the blue Refresh Schema link at the 
bottom of the dialog box first. Y our screen now looks like Figure 17-6. 



Data Source Configuration Wizard 


Select a data field for the value of the CheckBoxList 


Refresh Schema 


J 


FIGURE 17-6 


Click OK to close the dialog box. 

6. Back in Design View, click the Entityoatasource that was just added and press F4 to open its 
Properties Grid. Locate the orderBy property and enter it. Name to sort the list of genres alpha- 
betically. Switch to M arkup View and confirm that the code for the EntityDatasource control 
and the checkBoxList looks as follows: 

<asp : CheckBoxList ID="Pref erenceList" runat=" server" 

DataSourceID= " EntityDataSourcel " DataTextField= "Name " DataValueField= " Id" > 
</asp : CheckBoxList> 

<asp : EntityDataSource ID="EntityDataSourcel" runat=" server" 
ConnectionString="name=PlanetWroxEntities" 

Def aultContainerName="PlanetWroxEntities" EnableFlattening=" False" 
EntitySetName="Genres" OrderBy="it .Name" Select="it . [Id] , it. [Name] "> 
</asp : EntityDataSource> 

7. In Design View, click the CheckBoxList control once, open its Properties Grid, and switch to the 
Events tab. Double-click theoataBound event and add the following code in the Code Behind to 
preselect the items in the list based on the user's profile settings; 


VB.NET 

Protected Sub PreferenceList_DataBound (sender As Object, 
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e As EventArgs) Handles Pref erenceList . DataBound 
For Each myltem As Listltem In Pref erenceList . Items 

Dim currentValue As Integer = Convert. ToInt32 (myltem. Value) 
If Prof ile.FavoriteGenres. Contains (currentValue) Then 

myltem. Selected = True 
End If 
Next 
End Sub 

C# 

protected void Pref erenceList_DataBound (obj ect sender, EventArgs e) 
{ 

foreach (Listltem myltem in Pref erenceList . Items) 
{ 

int currentValue = Convert. ToInt32 (myltem. Value) ; 
if (Prof ile . FavoriteGenres . Contains (currentValue) ) 
{ 

myltem. Selected = true; 

} 

} 

} 

8. Extend the saveButton_ciick handler with the following code so it also saves the user's preferred 
genres: 

VB.NET 

Prof ile. Bio = Bio. Text 

' Clear the existing list 
Profile . FavoriteGenres . Clear ( ) 

' Now add the selected genres 

For Each myltem As Listltem In Pref erenceList . Items 

If myltem. Selected Then 

Profile . FavoriteGenres .Add (Convert . ToInt32 (myltem. Value) ) 

End If 
Next 

C# 

Prof ile. Bio = Bio. Text; 

// Clear the existing list 
Profile . FavoriteGenres . Clear ( ) ; 

// Now add the selected genres 

foreach (Listltem myltem in Pref erenceList. Items) 
{ 

if (myltem. Selected) 
{ 

Profile. FavoriteGenres. Add(Convert.ToInt32 (myltem. Value) ) ; 

} 

} 
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9. Save all your changes, request the Profile page in your 

browser, and log in when required. You should see the list of 
genres displayed in the browser, each one preceded by a checl< 
box. Select a couple of your favorite genres and clicl< the Save 
Profile button. Browse to another page and choose M y Profile 
again from the main Menu or Treeview. The genres you selected Favorite genres 
should still be selected in the page, as shown in Figure 17-7. 

How It Works 

Earlier you defined the Favoritecenres property in the profile as 
a generic list that can hold integer values. Because this property is 
a List, you do not assign values to it directly; instead, you use its 
methods 11 l<e Add and clear to add and remove items. Because each 
genre ID should be stored in the list only once, the list is cleared to figure 17-7 
remove any selection made earlier and then the selected items are added again: 

VB.NET 

Profile . FavoriteGenres . Clear ( ) 
C# 

Profile . FavoriteGenres . Clear ( ) ; 

Then when the list is empty, the IDs of the selected genres are added: 

VB.NET 

For Each myltem As Listltem In PreferenceList . Items 

If myltem. Selected Then 

Profile . FavoriteGenres .Add (Convert . ToInt32 (my It em. Value) ) 

End If 
Next 

C# 

foreach {Listltem myltem in PreferenceList . Items) 
{ 

if (myltem. Selected) 
{ 

Prof ile . FavoriteGenres .Add (Convert . ToInt32 (myltem. Value) ) ; 

} 

} 

This code loops through all the items in the checkBoxList. The selected property determines 
whether the user has selected the item in the Profile page. If it has been selected, the value of the genre 
is retrieved, converted to an integer (an int in C#), and then added to the FavoriteGenres list using 
the Add method. 


BAIternative Rock 
n Disco 
S Grunge 

□ Hard Rock 
0 Indie Rock 
G Industrial 

□ Jazz 

□ Pop 
0Punk 

□ Reggae 

□ Rock 
0 Techno 


Save Profile 
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That's really all you need to store complex data like a list of favorite genres In the user's profile. All 
you need to do Is add a bunch of numbers to a list. The .N ET run time then takes care of persisting 
the profile In the database and making It available again In subsequent pages. 

Of course, the list with favorite genres Isn't really useful until you actually make use of It In the site. 
In the next exercise, you see how to use the list to limit the list of Reviews that users Initially see 
when they visit the default Reviews page. 

^^^^^^Q Using Profile in the Reviews Page 

Currently your site has two pages In the Reviews folder that are capable of displaying reviews: 
AiiByGenre . aspx and Aii.aspx. In thIsTry It 0 ut, you modify the Default, aspx page so It displays 
yet another list of reviews. H owever, this time the list with reviews Is limited to those belonging to the 
genres that the user has selected In the M y Profile page. W hen anonymous users seethe page, they get a 
message that they haven't set their favorite genres yet. 

1. From the Reviews folder, open Default. aspx In M arkup View. 

2. Inside the control for the cpMaincontent placeholder, add the following codethat creates a nested 
Repeater wIth each Selected genre as a heading, followed by a list of reviews belonging to that 
genre: 

<asp : Repeater ID="GenreRepeater" runat="server"> 
<HeaderTemplate> 

<p>Below you find a list with reviews for your favorite music genres. </p> 
</HeaderTemplate> 
<ItemTemplate> 

<h3><asp: Literal ID="Literall" runat=" server" 

Text='<%# Eval ( "Name" ) %> ' ></asp:Literal></h3> 
<asp : Repeater ID="ReviewRepeater" runat=" server" 

DataSource= ' <%# Eval ( "Reviews" ) %> ' ItemType="PlanetWroxModel . Review" > 
<ItemTemplate> 

<asp:HyperLink ID="HyperLinkl" runat=" server" Text='<%# Item. Title %>' 

NavigateUrl= ' <%# "ViewDetails . aspx?ReviewId=" + Item. Id. ToString ( ) %>'> 
</asp:HyperLink><br /> 
</ItemTemplate> 
< /asp: Repeater > 
</ltemTemplate> 
< /asp: Repeater > 

<asp : PlaceHolder ID="NoRecords" runat=" server" Visible="False" > 

<p>Sorry, no reviews were found. You either didn't set your favorite genres 
or you may need to log in first. </p> 
< /asp : PlaceHolder > 

<p>You can change your genre preferences <a href =" -/MyProfile . aspx" 
runat=" server" >here</a> . </p> 

You can create the Repeater controls manually by writing the necessary code, or you can drag 
and drop them from the Data category of the Toolbox. The Inner Repeater contains a HyperLink 
control that points to the viewoetaiis. aspx page that you created In Chapter 15. N ote how the 
Inner Repeater Is Strongly typed by setting Its itemType to pianetwroxModei .Review (because 


662 I CHAPTER 17 PERSONALIZING WEBSITES 


it's displaying Review instances). You can't do tliis for tlie outer Repeater because its data source 
is a collection of anonymous objects, set in page_Load in the Code Behind as you see next. 

3. Double-click the page in Design View to set up a Load handler. Add an imports/using statement 
at the top of the page for the pianetwroxModei namespace and add the following code to the han- 
dler that VS created for you: 

VB.NET 

Imports PlanetWroxModel 

Protected Sub Page_Load (sender As Object, e As EventArgs) Handles Me. Load 
Using myEntities As PlanetWroxEntities = New PlanetWroxEntities () 
If Prof ile. FavoriteGenres .Count > 0 Then 

Dim favGenres = From genre In myEntities .Genres . Include ( "Reviews" ) 
Order By genre. Name 

Where Prof ile. FavoriteGenres . Contains (genre. Id) 
Select New With {genre. Name, genre. Reviews} 

GenreRepeater .DataSource = favGenres 
GenreRepeater . DataBind ( ) 
End If 

GenreRepeater .Visible = GenreRepeater . Items .Count > 0 
NoRecords .Visible = Not GenreRepeater .Visible 
End Using 

End Sub 

C# 

using PlanetWroxModel; 

protected void Page_Load (object sender, EventArgs e) 
{ 

using (PlanetWroxEntities myEntities = new PlanetWroxEntities () ) 
{ 

if (Prof ile. FavoriteGenres .Count > 0) 
{ 

var favGenres = from genre in myEntities .Genres . Include ( "Reviews" ) 
orderby genre. Name 

where Prof ile. FavoriteGenres . Contains (genre. Id) 
select new { genre. Name, genre. Reviews }; 

GenreRepeater .DataSource = favGenres; 

GenreRepeater. DataBind 0 ; 

} 

GenreRepeater .Visible = GenreRepeater . Items .Count > 0; 
NoRecords .Visible = IGenreRepeater .Visible; 

} 

} 

4. Save all your changes and request the page in the browser. If you selected one or more genres in the 
Profile page previously, and reviews are available for those genres, you should see a list similar to 
Figure 17-8. 

If you haven't set any preferred genres, or you're not logged in, you get the message shown in 
Figure 17-9. 
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By clicking tlie iinl< in tiie message, you are tal<en to tlie M y Profiie page so you can set or ciiange 
your preferred genres. Unautiiorized users are asi<ed to iog in or sign up for an account before 
tiiey can access tlie Profiie page. 


^ hltp. localhost:49i;c Pe.ie.v! Default. aip> P- SC 


^ My Favorite Reviews 


Home > Reviews 

Below you find a list with reviews for your favorite music genres. 
Alternative Rock 

Love Hate & Then There's you by The Von Bondies 

Grunge 

Indie Rock 

Sonic Youth: Daydream Nation live in Roundhouse, London 

Sonic Youth: Daydream Nation live at Lowlands, Biddinghuizen 

Day & Age by The Killers - Excellent album, but is it better than before? 

The Pains of Being Pure at Heart - One of the best new British bands from the U S ? 

P.J. Harvey & John Parish - A Woman a Man Walked By 

Battle for the Sun by Placebo - Possibly the best album of 2009 already 



FIGURE 17-8 



FIGURE 17-9 


How It Works 

Tile code in tiie Code Belli nd executes a LINQ to Entities query tli at retrieves all the reviews that 
belong to the user's favorite genres. For anonymous users, the list of favorite genres will be empty 
so they always get to seethe message about setting their preferences in the Profile page. To avoid an 
unnecessary call to the database, the query is executed only when the user has selected at least one pre- 
ferred genre by checking the count property of the Favoritecenres list. 
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Because the data source of the nested Repeater you added to theoefauit.aspx page is a collection of 
Review instances, it has been made strongly typed by setting its itemType and using its Item property 
as opposed to using Evai. As you learned previously, this mal<es it easier to write code and catch errors 
earlier. 

The nested Repeater looks a bit lil<e the code for the AiiByGenre.aspx page that has a Repeater that 
contains a BuiietedList control. Just as in that page, the nested Repeater gets its data from the outer 

Repeater With the DataSource attribute: 

<asp : Repeater ID="ReviewRepeater" runat=" server" ItemType="PlanetWroxModel .Review" 
DataSource= ' <%# Eval ( "Reviews" ) %> ' > 

</asp : Repeater> 

T he nested Repeater then uses the list of Reviews to build up the hyperlinl<s that take you to the 
details page: 

<asp : HyperLink ID="HyperLinkl" runat="server" Text='<%# Item. Title %>' 

NavigateUrl= ' <%# "ViewDetails . aspx?ReviewId=" + Item. Id.ToString () %>'> 
</asp :HyperLink><br /> 

The HyperLink control gets its Text from the Review instance that it's bound to and uses its id to 
build up theNavigateuri. TheTostring method is used on Item. Id to convert the value to a string 
before it's concatenated to the string that contains the UR L. This is done to avoid type conversions in 
Visual Basic where item, id normally results in a number that you can't concatenate to a string directly. 
As an alternative, if you're following along in VB.N ET, you could have used the & character to concat- 
enate the value. 

To see how these controls get their data, you need to look at the Code Behind that uses a LIN Q query 
targeting the Entity Framework: 

VB.NET 

Dim favGenres = From genre In myEntities . Genres . Include ( "Reviews" ) 
Order By genre . Name 

Where Prof lie. FavoriteGenres. Contains (genre. Id) 

Select New With {genre. Name, genre . Reviews} 

C# 

var favGenres = from genre in myEntities . Genres . Include ( "Reviews" ) 
orderby genre. Name 

where Profile . FavoriteGenres . Contains (genre . Id) 

select new { genre. Name, genre . Reviews } ; 

Except for the highlighted line of code and the variable name, this LIN Q query is identical to the one 
used in AiiByGenre.aspx. W hat makes this example special is the where clause that limits the number 
of reviews to those that the user is really interested in. N ote how the Contains method of the generic 
List class is used here. Although at first it may seem that all genres and reviews are retrieved from 
the database into theASPX pageand then compared with the values in the profile property called 
FavoriteGenres, the reverse is actually the case. The Entity Framework is smart enough to collect all 
the IDs from the FavoriteGenres property fl rst and then include them in the SQL statement that is 
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sent to the database to fetch the requested genres and reviews. This means that fiitering of the requested 
genres tai<es pi ace at the database ievei, and not in the ASPX page. This in turn means that fewer rows 
are transferred from the database to the ASPX page (oniy those that are reaiiy needed), which resuits in 
better performance. 

The profiie property Favoritecenres returns an empty iist, rather than throwing an exception for 
anonymous users. So, even users with no profiie can safeiy view this page. Instead of seeing any 
reviews, they get a message stating they haven't set their genre preferences yet, or that they need to iog 
in first. 

In the end of the page_Load handier, some code determines whether to show or hide the Repeater and 
theNoRecords controis; 

VB.NET 

GenreRepeater .Visible = GenreRepeater . Items . Count > 0 
NoRecords .Visible = Not GenreRepeater .Visible 

C# 

GenreRepeater .Visible = GenreRepeater . Items . Count > 0; 
NoRecords .Visible = 'GenreRepeater .Visible; 

If after data binding the outer Repeater, its items coiiection is stiii empty, it means no genres were 
found for the current user. If that's the case, the entire Repeater is hidden and the piaceHoider is 
shown. H owever, if the count property of the items coiiection is iarger than zero, the Repeater is 
made visibie and the piaceHoider is hidden. 


In Chapter 14, you created a pagecaiied NewPhotoAibum.aspx that iets users insert new Gig Pics 
aibums. The current impiementation of this page has a few shortcomings. First of aii, anyone can 
insert a new aibum. There's no way to bioci< anonymous users from creating a new aibum and 
upioading pictures. 

Secondiy, oniy M anagers can remove pictures from an existing photo aibum. It wouid be nice if the 
owner of an aibum couid aiso remove her own pictures. N ow that you i<now more about security 
and personaiizing web pages, this is pretty easy to impiement, as you see in thefoiiowing exercise. 

^^^^^^Q Letting Users Manage Their Own Photo Albums 

In this Try It 0 Ut you see how to biOCi< the NewPhotoAibum.aspx and ManagePhotoAlbum.aspx pageS 

from unauthenticated users. Additionaiiy, you see how to record the name of the user who created the 
photo aibum and use that name iater on to enabie users to aiter their own photo aibums. 

1. Open SQL Server M anagement Studio from the Windows Start menu or Start screen. Open your 
pianetwrox database, and iocatethe photoAibumtabie. Right-ciici< it and choose Design. Add 
a new coiumn caiied userName, set its data type to nvarchar (256) , and ieave the Aiiow N uiis 
option seiected. (This tabie aiready contains photo aibums without a vaiid userName, so you can't 
mai<e the coiumn required at this stage uniessyou deiete these photo aibums and their reiated 
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2. 
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pictures from the database first, or manuaily enter a usernamefor eacli existing row. 
clianges to tlie tabie and ciose SSM S. 


Save your 
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FIGURE 17-10 


Open tlie ADO .N ET Entity Data M odei fiie pianetwrox.edmx from tlieApp_code foider, riglit- 
ciici< an empty space in tlie designer, and clioose 
Update M odei from Database. Wait untii VS lias ana- 
iyzed your database and ciici< Finisli. Tlie UserName 
coiumn in tlie database now sliows up as a property of 
tlie PhotoAlbum ciass (see Figure 17-10). 

Save your cliangesand ciose tlie fiie. 

Open tlie Web. config fiie, and beiow tlie existing 
<iocation> eiements, add tlie foiiowing two <ioca- 
tion> dements to bioci< access to tlie two referenced 
fiies for anonymous users: 

</location> 

<location path= "ManagePhotoAlbum. aspx" > 
<system.web> 

<authorization> 

<deny users="?" /> 
< /author! zation> 
</system.web> 
</location> 

<location path= "NewPhotoAlbum. aspx" > 
<system.web> 

<authorization> 

<deny users="?" /> 
< /author! zation> 
</system.web> 
</location> 
</conf iguration> 

Save your changes and ciose the web. config fiie. 

Open NewPhotoAlbum. aspx in Design View, iocatethe EntityDatasource controi, and set up an 
event handier for its inserting event using the Events tab of the Properties Grid. Add the foiiow- 
ing codeto the handier that VS created for you; 


VB.NET 

Protected Sub EntityDataSourcel_Inserting (sender As Object, 

e As EntityDataSourceChangingEventArgs) Handles EntityDataSourcel . Inserting 
Dim myPhotoAlbum As PhotoAlbum = CType (e .Entity, PhotoAlbum) 
myPhotoAlbum. UserName = User. Identity. Name 

End Sub 

C# 

protected void EntityDataSourcel_Inserting (obj ect sender, 
EntityDataSourceChangingEventArgs e ) 

{ 

PhotoAlbum myPhotoAlbum = (PhotoAlbum) e . Entity; 
myPhotoAlbum. UserName = User . Identity .Name; 

} 
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5. From the photoAibums folder, open Default. aspx and switch to its Code Behind. 

6. At the top of the file, add an imports/using statement for the pianetwroxModei namespace, and 
then extend theoataBound event handler with the following code that shows the Edit linl< when 
the current user is either a M anager or the owner of the photo album; 


VB.NET 

Protected Sub ListViewl_DataBound (sender As Object, 

e As EventArgs) Handles ListViewl . DataBound 
If Not String. IsNullOrEmpty(DropDownListl.SelectedValue) Then 

Dim photoAlbumld As Integer = Convert .ToInt32 (DropDownListl . SelectedValue) 
Using myEntities As PlanetWroxEntities = New PlanetWroxEntities () 
Dim photoAlbumOvmer As String = (From p In myEntities . PhotoAibums 

Where p. Id = photoAlbumld 
Select p. UserName) . Single 0 


If User . Identity. IsAuthenticated And (User . Identity. Name = photoAlbumOwner _ 
Or User . IsInRole ( "Managers" ) ) Then 

EditLink.NavigateUrl = String . Format ( 

"~/ManagePhotoAlbum.aspx?PhotoAlbumId={o} " , DropDownListl . SelectedValue) 
EditLink. Visible = True 
Else 

EditLink. Visible = False 
End If 
End Using 

Else 

EditLink. Visible = False 
End If 
End Sub 


protected void ListViewl_DataBound (object sender, EventArgs e) 
{ 

if ( ! string . IsNullOrEmpty (DropDownListl . SelectedValue) ) 
{ 

int photoAlbumld = Convert. ToInt32 (DropDownListl. SelectedValue) ; 
using (PlanetWroxEntities myEntities = new PlanetWroxEntities () ) 
{ 

string photoAlbumOwner = (from p in myEntities . PhotoAibums 

where p. Id == photoAlbumld 
select p .UserName) . Single () ; 
if (User . Identity. IsAuthenticated && 

(User . Identity. Name == photoAlbumOwner || User . IsInRole ( "Managers" )) ) 

{ 

EditLink.NavigateUrl = string . Format { 

"~/ManagePhotoAlbum.aspx?PhotoAlbumId={ 0} " , DropDownListl . SelectedValue) ; 
EditLink. Visible = true; 

} 

else 
{ 

EditLink. Visible = false; 

} 

} 
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} 

else 
{ 

EditLink. Visible = false; 

} 

} 

7. Open the Code Behind of ManagePhotoAibum.aspx in the root. Add the following code to a 
page_Load handler. If the handler isn't there yet, double-click the page in Design View to have VS 
set one up for you. 

VB.NET 

Protected Sub Page_Load (sender As Object, e As EventArgs) Handles Me. Load 
Dim photoAlbumld As Integer = 

Convert. ToInt32 (Request. QueryString. Get ("PhotoAlbumld") ) 

Using myEntities As PlanetWroxEntities = New PlanetWroxEntities 0 
Dim photoAlbumOwner As String = (From p In myEntities . PhotoAlbums 

Where p. Id = photoAlbumld 
Select p. UserName) . Single 0 
If User . Identity. Name <> photoAlbumOwner And 
Not User . IsInRole ( "Managers" ) Then 
Response. Redirect ( "-/") 
End If 
End Using 
End Sub 

C# 

protected void Page_Load (object sender, EventArgs e) 
{ 

int photoAlbumld = Convert .ToInt32 (Request .QueryString. Get ( "PhotoAlbumld") ) ; 

using (PlanetWroxEntities myEntities = new PlanetWroxEntities () ) 
{ 

string photoAlbumOwner = (from p in myEntities . PhotoAlbums 

where p. Id == photoAlbumld 

select p .UserName) . Single 0 ; 
if (User . Identity. Name != photoAlbumOwner && !User. IsInRole ("Managers") ) 
{ 

Response. Redirect { "-/") ; 

} 

} 

} 

8. Because the entire page is now blocked for users without the proper permissions, there's no longer 
the need to hidethe individual buttonsin theListview control. Thismeansyou can remove the 
code for the Listviewi_itemcreated event handler. If you're using C#, don't forget to remove 
the handler definition from theListview's control in M arkup View as well. 

9. Save the changes to all open files (press Ctrl+Shift+S) and request NewPhotoAibum.aspx in your 
browser. If necessary, log in with an account you created earlier. 
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10. Enter a new name for the photo album and click Insert. At this stage, the photo album is saved, 
together with your username. Proceed by adding a few images to your photo album. 

11. Clicl< Gig Pics from the main Menu or Treeview and choose the new photo album you just created 
from the drop-down list. After the page has reloaded, your new photo album should be displayed, 
together with the Edit Photo Album 11 nl< at the bottom of the screen. Clicking the link takes you to 
ManagePhotoAibum.aspx, which lets you add or remove pictures in your photo album. 

12. Click Logout in the footer of the page. Then go to the Gig Pics page again and choose your new 
photo album from the drop-down list. N ote that the Edit Photo Album link is now no longer 
visible. 

How It Works 

You started this exercise by adding a column for the user's name to the photoAibum table. With this 
column, you can keep track of the user who created the photo album, giving you the opportunity to 
display data related to the user together with a photo album. W hen you run the Update Wizard by 
choosing Update M odd from Database, changes in the database (such as adding a column to a table) 
are reflected in the model. 

In the N ew Photo Album page, you used this new property by assigning it the name of the current user 
with this code in the EntityDataSourcei_inserting handler; 

VB.NET 

myPhotoAlbum.UserName = User . Identity .Name 
C# 

myPhotoAlbum.UserName = User. Identity. Name; 

The Page class has a user property that represents the user associated with the current request. This 
user, in turn, has an identity property that contains the user's Name. The Name is then assigned to the 
userName property of the PhotoAibum i nstance, which is retrieved from e. Entity. 

At this stage, the name is successfully stored in the database, together with the rest of the photo album. 
W hat's left is doing something useful with this name. The first place where you use this name is in 
the default page of the photoAibums folder. There, you used the following LIN Q to Entities query to 
retrieve the UserName for a photo album; 

VB.NET 

Dim photoAlbumOwner As String = (From p In myEntities . PhotoAibums 

Where p . Id = photoAlbumId 
Select p .UserName) . Single ( ) 

C# 

string photoAlbumOwner = (from p in myEntities . PhotoAibums 

where p. Id == photoAlbumId 
select p. UserName) .Single () ; 

This code uses the single method to retrieve the userName for a single photo album; the one speci- 
fied in photoAlbumId. The remainder of the code then determines the visibility of the Edit link if the 
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current user is logged in and is an owner of tlie piioto album or a member of the M anagers group. This 
way, both owners and all M anagers can change existing photo albums. 

The code in ManagePhotoAibum.aspx performs a similar check to stop unauthorized users from access- 
ing the page directly. 


OTHER WAYS OF DEALING WITH PROFILE 

in the final section of this chapter, you see two other useful ways of dealing with the Profile feature 
in ASP.N ET. First, you see how to use Profilefor anonymous users and then you learn how to access 
the profile of a user other than the current user. 

Anonymous Identification 

The Profile feature is extremely easy to configure, yet very powerful. All you need to do to give 
logged-in users access to their profiles is create a few elements in web.conf ig, and the ASP.N ET run 
timetal<es care of the rest. But what about anonymous users? W hat if you wanted to store data for 
your visitors who haven't signed up for an account or aren't logged in yet? For those users, you need 
to enable anonymous identification. With anonymous identification, ASP.N ET creates an anony- 
mous user in the users table for every new visitor to your site. This user then gets a cool<iethat is 
linl<ed to the anonymous user account in the database. 0 n every visit, the browser sends the cool<ie 
with the request, enabling ASP.N ET to associate a user, and thus a profile, with the user for the cur- 
rent request. 

To enable an anonymous profile, you need to do two things: turn on anonymous identification and 
modify some or all profile properties to expose them to anonymous users. 

You enable anonymous identification with the following element in web.config, directly under 

<system.web>! 

<anonymousIdentif ication enabled="true" cookieName="PlanetWroxAnonymous" /> 

The enabled attribute tums on the feature, and the cookieName attribute is used to give the appli- 
cation a unique cookie name used to store the user's ID at the client. 

After you have turned on anonymous identification, the next step involves modifying properties 
under the <profiie> element and setting their aiiowAnonymous attribute to true: 

<add name="FavoriteGenres" type="Systetn. Collections . Generic . List "1 [System. Int32] " 
allowAnonymous="true" /> 

This profile property can now be accessed through code for anonymous users as well. If you try to 
set a profile property without the aiiowAnonymous attribute set to true for a user that is not logged 
on, you'll get an error. It's up to you to only write to these properties from pages that are accessible 
only to logged-in users. Reading from a property works just fine, although you'll get empty values or 
the defaults you specified in web.config. 
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Once you have enabled profile properties for anonymous users, reading from and writing to them 
is identical to how you deal with normal profile properties. In the "Exercises" section at the end of 
this chapter, you find code to modify the current theme selector so it uses Profile for anonymous and 
logged-in users. 

Cleaning Up Old Anonymous Profiles 

You may wonder what is happening with an anonymous user's profile when the associated user signs 
up for an account and becomes a registered user. The answer is: nothing. The old profile is discarded 
and the user gets a new profile that is associated with the registered account. Fortunately, this is easy 
to fix. W henever a user changes from an anonymous to an authenticated user (that is, when she logs 
in), ASP.N ET fires the prof iie_onMigrateAnonymous event that you can handle. You handle this 
event in a Global. asax, which is used for code that handles application- or session-wide events as 
you've seen before. Inside an event handler for this event, you can access two profiles for the same 
user: the old, anonymous profile that is about to get detached from the user and the new profile that 
is associated with the user who is currently logging in. You can then copy over relevant data and 
delete the old user account and its related profile data. From then on, you deal with the new profile 
only. Although not used in the Planet Wrox website, this event handler is a perfect place to copy 
anonymous profile data from the old profile to the new one, as demonstrated by the following code: 

VB.NET 

Public Sub Prof ile_OnMigrateAnonymous (sender As Object, 
args As Prof ileMigrateEventArgs) 
Dim anonymousProf ile As Prof ileCommon = Prof ile . GetProfile {args .AnonymousID) 

' Copy over anonymous properties only 

Prof ile .AnonymousProperty = anonymousProf ile .AnonymousProperty 

Prof ileManager.DeleteProf ile (args .AnonymousID) 
Anonymousldentif icationModule . ClearAnonymousIdentif ier { ) 
Membership .DeleteUser {args .AnonymousID, True) 
End Sub 

C# 

public void Prof ile_OnMigrateAnonymous (object sender, Prof ileMigrateEventArgs args) 
{ 

Prof ileCommon anonymousProf ile = Prof ile .GetProfile (args .AnonymousID) ; 
// Copy over anonymous properties only 

Prof ile .AnonjTiiousProperty = anonymousProf ile . AnonymousProperty; 

Prof ileManager.DeleteProf ile (args .AnonymousID) ; 
Anonymousldentif icationModule . ClearAnonymousIdentif ier { ) ; 
Membership .DeleteUser (args .AnonymousID, true) ; 

} 

N otethat this code uses profiie.cetprof lie (args. Anonymous ID) to get an instance of the previ- 
ous, anonymous profile of theuser. Thisgetsa reference to theprofileof the user before she logged 
in. args. Anonymous ID retums a Unique identifier for the anonymous user, which has been stored as 
the user's username in the users table in the database. 
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The code then continues to copy over the existing, anonymous profiie properties from the oid to the 
new profile. In thisexampie, oniy one property— caiied AnonymousProperty—iscopied. However, 
you can modify the codeto copy more properties. N otethat there is no point in copying over prop- 
erties that are not accessible by anonymous users. Those types of properties cannot have been set 
previously, so there's nothing to copy. 

The final three lines of code then delete the old profile, clear the anonymous user ID from the cool<ie 
and, finally, delete the old, anonymous user account from thedatabase. When this code has finished, 
the old profile is migrated successfully to the new profile, and all the old profile stuff has been suc- 
cessfully deleted from the database and the user's cool<ies. 

The Prof iieManager class— which lives in the system.web. Profile namespace that you need to 
import for the previous example to work— provides you with more useful methods to work with 
Profile. For example, you can use DeieteinactiveProf iies to delete profiles for users who have 
been inactive for a certain amount of time. For detailed information about the prof iieManager 

class, look at this M SDN web page: http: //tinyurl .com/ManageProf ile4-5. 

Looking at Other Users' Profiles 

The examples you have seen so far use Profile to access data for the current user. H owever, what if 
you need to display data for a different user? For example, what if you wanted to display a user's 
biography below a G ig Pics album? You won't be able to use the profile property of the page class 
in this case directly because it provides information about the current user, not about the user who 
created the photo album. 

To solve this problem, the prof iiecommon class, the base class of the underlying type of the 
Profile property of the Page class, comes with a cetprof lie method. Thecetprof lie method 
retrieves an existing profile from the database if the name passed to it exists, or it creates a brand 
new profile if it doesn't exist yet. For example, to get the profile of a user with a username of 
Carmen, you can use this code: 

VB.NET 

Dim theProfile As Prof ileComtnon = Prof ile . GetProfile ( "Carmen" ) 
C# 

Prof ileCommon theProfile = Prof ile .GetProfile ( "Carmen" ) ; 

With theProfile instance created, you can access its properties as you are used to. The following 
code assigns theeio property of Carmen's profile to the Text property of a Label control: 

VB.NET 

BioLabel .Text = theProfile . Bio 
C# 

BioLabel .Text = theProf ile . Bio; 


Being able to read someone else's profile is extremely useful. You can use it to show some of the 
properties of the profile to other users, as you seein the final exercise of this chapter. However, you 
can also use similar codeto update other users' profiles. For example, you could create a page in the 
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M anagement section that enables you to manage the profiles of the users that registered at your site. 
W hen you do modify other users' profiles, be sure to call the save method when you're done. As you 
learned earlier, changes to the profile are normally persisted in the database automatically. However, 
this applies only to the profile of the current user. To change and persist the previously retrieved pro- 
file, you can use this code: 

VB.NET 

theProf ile . Bio = "New Bio for the Carmen account here" 
theProf ile . Save ( ) 

C# 

theProf ile . Bio = "New Bio for the Carmen account here"} 
theProf ile . Save ( ) ; 

In the following exercise, you put some of this into practice when you show the name of the user 
who created a specific photo album, together with the biography of the user. 

^^^^^^Q Working with Other Users' Profiles 

T he Default .aspx page in the photoAibums folder displays the pictures in a specific photo album. 
You can't see which user created the photo album, so that would be a nice new feature. And to further 
improve the page, you can also display the user's biography. In this Try It Out, you see how to imple- 
ment both features. 

1. From the photoAibums folder, open the Default .aspx page in M arl<up View. Scroll down and 
locate the two breaks and thenyperLink to edit the album you added earlier. Just before the 
breal<s and thenyperLink control, drag a piaceHoider control from theToolbox and set its ID to 
photoAibumDetaiis. I nside this PiaceHoider, drag two Label controls and then modify the code 
manually so it ends up lil<e this: 

</asp:ListView> 

<asp : PiaceHoider ID=" PhotoAibumDetaiis" runat=" server "> 
<h2>Photo Album Details</h2> 
Created by: 

<asp:Label ID="UserNameLabel" runat=" server" Text=" "x/asp: Labelxbr /> 
About this user: 

<asp:Label ID="BioLabel" runat=" server" Text=" "></asp: Label> 

< /asp : PiaceHoider > 
<br /xbr /> 

<asp:HyperLink ID= "EditLink" runat= " server " Text="Edit Photo Album" /> 

2. Switch to the Code Behind of the page (press F7) and locate the Dataeound event handler for the 
Listview control. Right after the nested if statement that hides thenyperLink control when the 
user doesn't have the necessary permissions, add these lines of code that retrieve the profile for the 
user who created the photo album and then update the relevant labels: 

VB.NET 

EditLink. Visible = False 
End If 


If Not String. IsNullOrEmpty(photoAlbumOwner) Then 
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Dim ownerProfile As Prof ileCommon = Profile.GetProf ile (photoAlbumOwner) 
UserNameLabel .Text = photoAlbumOwner 
BioLabel .Text = ownerProfile . Bio 
PhotoAlbumDetails .Visible = True 
Else 

PhotoAlbumDetails .Visible = False 
End If 

End Using 

C# 

EditLink. Visible = false; 

} 

if ( ! string. IsNullOrEmpty (photoAlbumOwner) ) 
{ 

Prof ileCommon ownerProfile = Prof ile. GetProf ile (photoAlbumOwner) ; 
UserNameLabel .Text = photoAlbumOwner; 
BioLabel .Text = ownerProfile. Bio; 
PhotoAlbumDetails .Visible = true; 

} 

else 
{ 

PhotoAlbumDetails .Visible = false; 

} 

} 

3. Save all your changes and open the page in your browser. 

4. From the drop-down list, choose a photo album you created and you should see the photo album 
details appear. If you don't see them, make sure you selected a recent photo album from the list. 
Because you added the userName column to the database at a later stage, some of the photo 
albums don't have a user associated with them. If the Photo Album Details section remains hidden, 
create a new photo album and add one or more pictures to it. This ensures that you have at least 
one photo album with the userName property. If you now select the photo album from the list, you 
should seethe Photo Album Details, as displayed in Figure 17-11. 




■ 

<- - G □ localhost;49186/=^-!ut.-.:- -M-ns/ 


Photo Album Details 



Created by: Imar 

About this user: 1 am a big fan of Punk. Indie Rock. Grunge and Old Skool Techno. 1 like bands and artists such 
as Sonic Youth. Joy Division. Editors. P.J. Harvey, Muse. Placebo. Incubus. Interpol, the Killers, and many more. 



FIGURE 17-11 
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How It Works 

M uch of the code in this exercise has been discussed before. After adding a few Label controis in the 
Photo Aibum page, you retrieved the profiiefor the owner of the aibum with this code: 

VB.NET 

Dim ownerProfile As Prof ileComtnon = Prof ile . GetProf ile (photoAlbutnOwner) 
C# 

Prof ileCommon ownerProfile = Prof ile . GetProf ile (photoAlbumOwner ) ; 

This code gets a reference to an existing profiie using cetprof lie. The ciass that is returned is of 
type Prof ileCommon; the Underlying data type of the profile property with the properties such as 
FirstName and LastName you Set in the Web . conf ig file. W hen you have the reference, worl<ing with 
it is almost identical to working with normal profiles. The only difference is that you must call save to 
persist any changes made to the profile in the database as you saw earlier. 


PRACTICAL PERSONALIZATION TIPS 

The following list provides some personalization tips: 

>• Don't try to access the profile of the current user in the Login page, because it isn't available 
yet. The profile is instantiated early in the page's life cycle, so when a Login control authen- 
ticates a user in a Login page, it's too late to associate that user's profile with the current 
request. Usethecetprofiie method of prof iiecommon instead or redirect to another page. 

>■ Carefully consider what to store in Profile and what is better stored in your own database 
tables. Although the single-row structure that ASP. N ET uses to store your profile offers you 
a simple and convenient solution, it's not the most efficient one, especially not with large 
amounts of data. Don't try to store complete reviews or even photo albums in Profile, but use 
your own database tables instead. 

>- The current implementation of Profile makes it difficult to query data from the profiles 
table in your own queries. For example, it's difficult to answer queries like "Give me all users 
that prefer the Rock genre" because all the data is stored in a single column. To work around 
these issues, store data in your own tables (using Entity Framework, for example), or use 
a different Profile provider that you can download from the Sandbox section of the official 

ASP.N ET website at www.asp.net/downloads/sandbox/. 


SUMMARY 


In thischapter, you learned how to use the Profile feature that ships with ASP.N ET 4.5 to store 
user-related data. You can use Profile to keep track of data for authenticated and for anonymous 
users. 
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Setting up a profile is a pretty straiglitforward operation. You need a <prof iie> element in the 
web.config file with a <properties> Child element, and then you add one or more properties using 
<add/> elements. To group related properties, you use the < group > element. 

W hen you have set up the profile, you access its properties through the profile property of the 
Page class. This always accesses the profile for the current user. Any changes you make to this pro- 
file are persisted for you automatically at the end of the ASP. N ET life cycle. 

By design, profile properties are accessible only to logged-in users. H owever, you can easily change 
this by turning on anonymous identification. 

To access the profile of a user other than the one associated with the current request, you can use 
thecetprof iie method. Any changes made to this profile are not persisted automatically, so you 
must call Save to send the changes to the database. 

N ow that your pages contain more and more code, chances are that bugs and problems will creep 
into your application. In the next chapter you learn how to use exception handling to avoid those 
problems from ending up in the user interface. You also learn how to debug your code, so you can 
fix problems before they occur. 


EXERCISES 


1. The favorite theme feature you created earlier would be a great candidate for a profile property. 
What code would you need to add to the profile In web . conf ig to make this possible? 

2. When you create profile properties In web . conf ig, the compiler extends the Profile property 
only for the Code Behind classes of Web Forms. Therefore, In order to set the favorite theme 
(or other properties) In the BasePage, you need to access the profile In a special way. Instead of 
accessing the Profile property on the Page class, you access It through the HttpContext like 
this: 

VB.NET 

Dim myProfile As Prof ileCommon = CType (HttpContext . Current . Prof ile. Prof ileCommon) 
C# 

Prof ileCommon myProfile = (Prof ileCommon) HttpContext . Current . Prof ile ; 

Given this code, how can you rewrite Page_Preinit so It gets the preferred theme from the pro- 
file Instead of from a cookie? 

3. What else do you need to change to finalize storing the theme In the profile Instead of a custom 
cookie? 


You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 


Anonymous identification 


The ASP.NET feature that enables you to track users to your site, 
even if they haven't signed up for an account or are not logged In 


ASP.NET Profile 


EndRequest 


The ASP.NET application service that enables you to store and 
retrieve information about users to your site 

An event fired by the application in which the changes to the 
profile are persisted in the database 


OnMigrateAnonymous 


An event fired by the ASP.NET Profile feature that you can handle 
in Global . asax to copy anonymous properties into the new 
profile 


Personalization 


Profile groups 


The process of targeting users with customized content based on 
their preferences or other information 


The mechanism that enables you to group related profile 
properties 


Profile provider 


A provider responsible for storing and retrieving profile-related 
data 



Exception Handling, Debugging, 
and Tracing 

WHAT YOU WILL LEARN IN THIS CHAPTER: 

>• How to write code that is able to detect and Inandle errors tliat occur 
at run time, at tlie same time sliielding your users from the error 
details 

>" How to detect errors that occur on your production machine so you 
can take countermeasures 

> What debugging is and what debugging tools VS offers 

>" What tools you can use to gain information about your system and 
code while it's running in a development or production environment 

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 
www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the Chapter 18 download. 

You can't make an omelet without breaking eggs and you cannot write code without creating 
bugs. N 0 matter how hard you try and how good you are, your code will contain problems 
that affect the behavior of your website. 

Of course you should strive to minimize the impact of these bugs, aiming for a "zero bug 
count." To aid you in this, the ASP.N ET run time and Visual Studio provide you with a num- 
ber of tools. 

First of all, the languages supported by .N ET implement exception handling, a methodology 
to identify and handle errors that occur at run time. By handling these errors, you can present 
your users a friendly error message. At the same time, you can log these errors, giving you a 


680 I CHAPTER 18 EXCEPTION HANDLING, DEBUGGING, AND TRACING 


chance to fix them before they reoccur. In this chapter, you see how exception handiing worlcs, and 
how to iog your errors. 

Before your code goes into production, you need to write and debug it first. To heip you debug your 
code, VS comes with a rich toolset that includes ways to step through your code line by line, look at 
your variables and objects at run time, and even change them as you go. The toolset also provides 
you with valuable information about the execution path your codefollows: the path that your appli- 
cation tal<es through your code, following methods, event handlers, if and Else statements, and 
so on. In the next section, you learn more about exception handling, while the debugging tools are 
discussed later in this chapter. 

EXCEPTION HANDLING 

W henever you write code, there is a chance things won't turn out as expected, resulting in code that 
does not compile, a crash, or otherwise unexpected behavior of your application. Things can go 
wrong for a large number of reasons: you introduce a typo in your code, the database server you're 
connecting to at run time suddenly goes down, you got your logic mixed up and accidentally deleted 
all rows from a database table instead of just one, you try to delete a row from a database table that 
still has associated rows, you try to write a file to a folder without proper permissions, your users 
enter incorrect data, and so forth. 

To understand these problems and thinl< of ways to anticipate, avoid, and handlethem, you first need 
to understand the different types of errors that may occur in your website. Once you understand the 
main differences, the remainder of this section is spent discussing ways to prevent and solve them. 

Different Types of Errors 

You can broadly categorize errors into thefollowing groups: 

>■ Syntax errors— Errors that are caused by typos, missing l<eywords, or otherwise incorrect 
code. 

>• Logic errors— Errors in applications that seem to run fine but that produce unexpected or 
unwanted results. 

>• Runtimeerrors— Errors that cause the application to crash or behave unexpectedly at run 
time. 

Each of these categories is discussed in thefollowing sections, together with information on avoid- 
ing and fixing them. 

Syntax Errors 

Syntax errors, or compile errors, are the easiest to find and fix because they happen during 
development. The IDE tells you when an error occurs and often prevents you from running the 
application while it still contains errors. Syntax errors are caused by simpletypos, missing or dupli- 
cate l<eywords and characters, and so on. Thefollowing examples all show errors that are caught at 
development time by the compiler. A compiler isa program that turns the human-readable code you 
write in VB.N ET or C# into machine-readable code that can be executed. 
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VB.NET 

mailBody = mailBody . Repalce { "##Name##" , Name. Text) 
Response .Write { ) 


Replace is misspelled 

Required parameter 
' for the Write method 
' is missing 

If i > 10 ' Missing keyword Then 

' Do something here 
End If 

C# 

mailBody = mailBody. Repalce ("##Name##", Name. Text); // Replace is misspelled 

Response. Write {) ; // Required parameter for the 

// Write method is missing 

if (i > 10) // Missing opening brace or 

// extraneous closing brace 

// Do something here 


Compile errors are always displayed in the Error List (accessible through the View o Error List 
menu), shown in Figure 18-1 for a C# website. 


T ' I O 6 Errors | ! 0 Warnings , „0 Messages Search Error List P- 

I Description File Line ^ Column ^ 

Q4 'string' does not contain a definition for 'Repalce' and no extension method 'Repalce' accepting a first Errors.aspx.es 15 25 

argument of type string' could be found (are you missing a using directive or an assembly reference?) 

05 No overload for method 'Write' takes 0 arguments Errors.aspx.es 18 1 

©6 Only assignment, call, increment, decrement, await, and new object expressions can be used as a statement Errors.aspx.es 21 11 v 


FIGURE 18-1 


You can force the compiler to give you an up-to-date list of all the compilation errors in your site. To 
do this, from the main menu choose Build o Build Web Site. W hen you want to force VS to recom- 
pile the entire site (which is slower as it also recompiles files that haven't changed), choose Build o 
Rebuild Web Site instead. 

To go to thelocation where theerror occurred so you can fix it, double-clicl< the error in theError 
List. To cyclethrough the errors and the code where the error occurs, clicl< an error in the Error List 
and press F8 to go to the next error. 

Logic Errors 

Logic errors are often harder to find because they compile fine but only happen during the execution 
of your code. Consider the following buggy example: 

VB.NET 

Dim fromAddress As String = "youaexample.com" 
Dim toAddress As String = EmailAddress .Text 
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myMessage . From = New MailAddress (toAddress) 
myMessage . To . Add {New MailAddress (frottiAddress) ) 

C# 

string fromAddress = "you@example.com"; 
string toAddress = EmailAddress . Text ; 
myMessage . From = new MailAddress (toAddress) , ■ 
myMessage . To .Add {new MailAddress (fromAddress) ) ; 

Although it's easy to see what the problem is in this example (the to and From addresses are mixed 
up), it may be harder to find in a file with 250 lines of code. Additionally, because the compiler hap- 
pily accepts your mistake, you won't notice the error until you seea messagein your Inbox that you 
thought you sent to your visitors. 

The best way to track down and solve logic errors is using the built-in debugging capabilities of VS. 
You get an in-depth look at these tools later in the chapter. 

Runtime Errors 

Runtime errors occur at run time, which makes them incredibly difficult to track. Imagine you have 
a site that contains a bug that's hidden somewhere in a page. You haven't found it yet, but one of 
your visitors did and she gets a nasty error message (more on those later) instead. W hat can you 
do? Probably not much, because there's a fair chance your visitor won't even inform you about the 
mistake. 

So, it's important to have a good error handling strategy in place that enables you to avoid errors 
when possible, and that handles them gracefully and optionally logs relevant information for you 
when they occur. 

The following section deals with detecting and handling errors, or exceptions in .N ET parlance; 
later in this chapter, you learn how to log errors and shield your users from ugly pages with detailed 
exception messages. 

Catching and Handling Exceptions 

N ormally, when serious exceptions occur, the user is presented with an error message. For example, 
if you try to send a message to a mail server that isn't up and running, or doesn't allow you to con- 
nect to it, you'll get an exception that provides details about the error. The exception that you get 
is an instance of a class that ultimately inherits the system. Exception class; the base class for all 
exceptions. M any exception types exist, each serving a distinct purpose. 

By default, this exception bubbles up all the way to the user interface where it's presented as a so- 
called Yellow Screen of Death, a reference to Windows' "Blue Screen of Death" that you get when 
W indows crashes. You see a real example of this error in the next exercise. 

Obviously, it's a lot better if you can anticipate the exception and write some code that prevents it 
from appearing in the user interface. You could, for example, display a nicely formatted message to 
users instead, informing them the message could not be sent at this moment. 

Fortunately, support for these kinds of scenarios is integrated deeply in the .N ET programming 
languages such as C#and Visual Basic .N ET. In these languages, you can make use of Try catch 
Finally blocks (try catch finally in C #) Where code that could potentially throw an exception 
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is wrapped in a Try bioci<. N otetliat tiie VB.N ET and C# versions of tliese l<ey words only differ in 
case; Hi refer to tiie capitalized version in tlie remainder of tlietext, except in code bioci<s. 

W lien an exception occurs, tiie remainder of the code in tiieTry bioci< is si<ipped and some code in a 
Catch bioci< can be run to deai witii tlie error. You can liave multiple catch blocl<s that all deal witii 
specific exceptions, but only the first block that matches the exception type will fire. Therefore, it's 
important to order the various catch blocks from specific to generic in order to handle the excep- 
tion in the most specific catch block. You see more of this later. 

A Try or a Catch block can be followed by a Finally block. Code in a Finally block is always 
fired, regardless of whether an exception occurred and, as such, is an ideal location for some clean- 
up code. 

Both Catch and Finally blocks are optional, although you always need at least one of them. 

The code in the following example tries to send an e-mail and then sets the Text property of a 
Label to the value of the Variable userMessage. Note: myMessage and mysmtpciient are Created 
by code not shown in this example. The userMessage variable is assigned a value in either the Try 
block (when the code executed successfully) or in the catch block (when an error occurred). Either 
way, this userMessage is always assigned to the Label in the Finally block: 

VB.NET 

Dim userMessage As String = String. Empty 
Try 

mySmtpClient . Send (myMessage) 

userMessage = "Message sent" 
Catch ex As Exception 

userMessage = "An unknown error occurred." 
Finally 

Message. Text = userMessage 
End Try 

C# 

string userMessage = string . Empty ; 

try 

{ 

mySmtpClient . Send (myMessage) ; 
userMessage = "Message sent"; 

} 

catch (Exception ex) 
{ 

userMessage = "An unknown error occurred."; 

} 

finally 
{ 

Message. Text = userMessage; 

} 

In this code example, the catch block isset up to handlean exception of type system. Exception, 
the base class of all exceptions in the .N ET Framework. This exception is sent to (or caught by) the 
Catch block in the ex variable. In C#, you could leave out the ex variable if you don't use it in your 
code: 
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C# 

catch (Exception) 
{ 

userMessage = "An unknown error occurred."; 

} 

The ability to specify an Exception type is useful when you thinl< your code can encounter more 
than one exception. In that case, you can have multiple catch blocl<s for different Exception types. 
The following code is capable of handling a specific smtpException that may occur during the 
mail sending operation, and it's also capable of catching all other exceptions using its generic catch 
block: 

VB.NET 

Try 

mySmtpClient . Send (myMessage) 
Catch smtpException As SmtpException 

userMessage = "Sorry, an error occurred while sending your message." 
Catch ex As Exception 

' Something else went wrong. 
End Try 

C# 

try 

mySmtpClient . Send (myMessage) ; 
catch (SmtpException smtpException) 

userMessage = "Sorry, an error occurred while sending your message."; 
catch (Exception ex) 

// Something else went wrong. 

The order of the exception-handling blocks is important. .N ET scans the list of catch blocks from 
top to bottom and only fires the code in the first block that matches a specific type of exception. 
In the preceding example, when an smtpException occurs (which is a subclass of Exception), it 
will be caught by the catch block that handles exceptions of type smtpException. Although an 
SmtpException is also an Exception, thecode in the last Catch block won't be fired anymore 
because only the first matching catch block is handled. Therefore, if you reverse the order of the 
Catch blocks in this example, the more generic Exception block would be executed, and the code in 
the SmtpException block would never run. 


WARNING The preceding example shows how to catch all exceptions using the 
base Exception type in the catch bioci<. Don't use this in your own websites. 
Instead, handle only those types of exceptions that you know how to deal with, 
and let all other, unknown exceptions bubble in the application. Later in this 
chapter you see how to centrally handle these unhandled exceptions. 
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In thefollowing exercise, you see how to use Try catch Finally in your code. 
^^^^^^Q Handling Exceptions 

In tliisTry It 0 ut, you see liow to write ex ception-liandiing code to catcli probiems witli sending 
e-maii. Tliese probiems may occur wlien tlie maii server is down, for exampie. To simuiate a broi<en 
maii server, you'ii temporariiy use a nonexistent maii server name causing your code to crasli. 

You'ii try out tlie Try catch Finally code in a separate page in tlie Demos foider so you can cioseiy 
watcli its beliavior. W lien you understand liow itwori<s, you'ii modify tlie contactForm.ascx user 
controi and incorporate tlie exception-liandiing codetliere. Tlie reason you write tliis code in tliedemo 
page first is tliat tlie user controi uses an Ajax updatepanei tliat sliieids users from tlie dirty detaiis of 
an exception by defauit, mai<ing it difficuit to see wliat's going on. 

1. Create a new fiie in tlie Demos foider and caii it Except lonHandiing.aspx. Base tlie page on your 

custom tempiate and set its Title to Exception Handling Demo. 

2. Add a Label controi to tlie main content area and set its id to Message. 

3. Switcli to Design View and set up an event liandier for tine Load event of tlie page by doubie-ciici<- 
ing tlie read-oniy area of tlie page. Tlien at tlie top of tlie fiie, add eitlier an imports or a using 
statement for tlie system. Net .Mail namespace: 

VB.NET 

Imports System. Net .Mail 
C# 

using System. Net .Mail ; 

4. Add tliefoiiowing code to tine event liandier tliat VS created. N otice liow this code is aimost identi- 
cai to tlie code you added in tlie contactForm.ascx user controi, so you can saveyourseif some 
typing by copying parts of tlie code from that fiie. N otice how the code passes "DoesNotExist" to 
the smtpciient's constructor as an argument for the maii host. This is done deiiberateiy to trigger 
an exception. 

VB.NET 

Protected Sub Page_Load (sender As Object, e As EventArgs) Handles Me . Load 
Dim myMessage As MailMessage = New MailMessage () 
myMessage. Subject = "Exception Handling Test" 
myMessage. Body = "Test message body" 

myMessage . From = New MailAddress ("you@exampIe.com") 
myMessage. To. Add (New MailAddress ( "you@example. com") ) 

Dim mySmtpClient As New SmtpClient ( "DoesNotExist") 
mySmtpClient . Send (myMessage) 
Message. Text = "Message sent" 

End Sub 

C# 

protected void Page_Load (obj ect sender, EventArgs e) 
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{ 

MallMessage myMessage = new MailMessage () ; 
myMessage. Subject = "Exception Handling Test"; 
myMessage. Body = "Test message body"; 

myMessage. From = new MailAddress ( "you@exampIe. com" ) ; 
myMessage. To. Add (new MailAddress ( "you@example. com" ) ) ; 

SmtpClient mySmtpClient = new SmtpClient ("DoesNotExist") ; 
mySmtpClient. Send (myMessage) ; 
Message. Text = "Message sent"; 

} 

Don't forget to change the two e-mail addresses to your own. 

5. 0 pen Web . con fig and comment out the <sys tem.net> element (select the entire element and 
then press Ctrl +K followed by Ctrl -fC). You added this element in Chapter 9 to configure your 
site for sending e-mails. By disabling it temporarily, you can ensure that no settings from the con- 
figuration file are used which in turn will force the smtpciient to try to deliver the e-mail at the 
DoesNotExist server which obviously will fail. Save the changes to the file, but keep it open so you 
can easily undo this change in a later step. 

6. Switch bacl< to Except ionHandiing.aspx and press Ctrl-ff 5 to Open up the page in your browser. 
You should seethe "Yellow Screen of Death" with an error message. Scroll down in the page to see 
the Stacl< Trace, shown in Figure 18-2. 







^ localhost:45185/Demos/' Except! onHandling.aspx ''; ~ C?|]41- Google ^ E 



[WebException : The remote name could not be resolved: 'DoesNotExist'] 

System. Net. ServicePoint.GetConnection(PooledStream PooledStream, Object owner. Boolean async, IPAddressS address, S 
System. Net. PooledStreaiii.Activate(Object owningObject, Boolean async, GeneralAsyncDelegate asyncCallback) +307 
System. Net . PooledStream. Activate (Object owningObject, GeneralAsyncDelegate asyncCallback) +19 

System, Net. ConnectionPool.GetConnection(Object owningObject, GeneralAsyncDelegate asyncCallback, Int32 creationTime 

System. Net. Mail. SmtpConnect ion. GetConnection(ServicePoint servicePoint) +141 

System. Net .Mail , Smt pTrans port .GetConnect ion (ServicePoint servicePoint) +170 

System.Net .Mail. SmtpClient. GetConnection() +44 

System. Net. Mail. SmtpClient. Send(HailHessage message) +1554 



[SffltpException : Failure sending mail.] 

System. Net .Mail . SmtpClient . Send (MailMessage message) +1906 
Demos_ExceptionHandling.Page_Load(Object sender, EventArgs e) +234 

System. Web . Util . Call iEventHandlerDelegateProxy. Callback (Object sender, EventArgs e) +51 
System. Web. UI . Control .On Load ( EventArgs e) +92 
System. Web. UI. Control. LoadRecursiveO +54 

System. Web . UI . Page . ProcessRequestMain( Boolean includeStagesBef oreAsyncPoint, Boolean includeStagesAfterAsyncPoint) 


< 111 > 



FIGURE 18-2 


N ote that two exceptions are listed; a webException (to indicate that the name DoesNotExist 
could not be resolved) and a smtpException. The code in the smtpciient encountered and 
caught the webException, Wrapped it in a new smtpException and threw that exception to indi- 
cate to your code that a problem occurred. 
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7. Go back to VS and wrap the code that assigns the addresses and sends the message in a Try catch 
bioci<: 

VB.NET 

Try 

myMessage . From = New MailAddress ( "youOexample . com" ) 

myMessage . To .Add (New MailAddress ( " you@example . com" ) ) 

Dim mySmtpClient As New SmtpClient ( "DoesNotExist" ) 

mySmtpClient . Send (myMessage) 

Message. Text = "Message sent" 
Catch ex As SmtpException 

Message. Text = "An error occurred while sending your e-mail. Please try again." 
End Try 

C# 

try 
{ 

myMessage . From = new MailAddress ( "youOejcample . com" ) ; 
myMessage . To .Add (new MailAddress ( "youOejcample . com" ) ) ; 
SmtpClient mySmtpClient = new SmtpClient ( "DoesNotExist" ) ; 
mySmtpClient . Send (myMessage) ; 
Message. Text = "Message sent"; 

} 

catch (SmtpException) 
{ 

Message. Text = "An error occurred while sending your e-mail. Please try again."; 

} 

N otice how the code stiii contains an invaiid maii server. 

8. Save your changes and request the page in your browser again. Y ou shouid now see a user-friendiy 
error message, visibie in Figure 18-3. 


© Exception Handling Demo 


+ ' * http:/;'localhost:49185/Demo5/ExceptionHandling,a5px C Q.- gie D"©" 






1 

\ Home Reviews Gig Pics 

About 

Login 1] 


An error occurred while sending your e-mail Please try again. 



^[Monochrome "^^^^l 



FIGURE 18-3 


The exception that is thrown is now caught in the catch bioci<. Instead of getting an error page 
with aii the technicai detaiis of the exception, the user now gets a friendiy message explaining 
that something went wrong. 
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9. Go back to ExceptionHandling.aspx and fiX the COdefor the SmtpClient: 

VB.NET 

Dim mySmtpClient As New SmtpClient () 
C# 

SmtpClient mySmtpClient = new SmtpClient () ; 

Also, in web.config undo the changes you made earlier by restoring the <system.net> element. 

10. Save all open changes and request ExceptionHandling.aspx in your browser again. You'll now 
get a message indicating that the e-mail was sent successfully. 

11. Open contactForm.ascxfrom the Controls folder, switch to its Code Behind, and wrap the code 
that creates and sends the message in the following Try catch block. Also, move the line that sets 
the visibility of the Message control to the Finally block: 

VB.NET 

Try 

Dim myMessage As New MailMessage ( ) 

System . Threading . Thread . Sleep (5000) 
Catch ex As SmtpException 

Message. Text = "An error occurred while sending your e-mail. Please try again." 
Finally 

Message .Visible = True 
End Try 

C# 

try 

{ 

MailMessage myMessage = new MailMessage () ; 

System . Threading . Thread . Sleep (5000) ; 
catch (SmtpException) 

Message. Text = "An error occurred while sending your e-mail. Please try again."; 
finally 

Message .Visible = true; 

Notice how the line that sets the Message control's visible property to True is now in a Finally 

block. This way, the Label is made visible, regardless of whether an error occurred. 

From now on, whenever an error occurs during the sending of the e-mail, your users will get a 
normal error message instead of the full error detail pagethat.NET displays by default. 

How It Works 

W hen an exception occurs at run time, .N ET checks if the code is wrapped in a Try catch block. If 
that's the case, it scans the list of catch blocks for an Exception type that matches the exception being 
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thrown. Only the first catch block that matches the Exception Is being called; all remaining catch 
blocks are Ignored. Code In the Try block following the line that caused the exception Is not executed 
anymore. 

In this exercise, the code has a catch block for the smtpException type, which Is executed when an 
exception of that type— or one of Its subtypes— Is encountered. As you learned before the exercise, you 
can have multiple catch blocks, each one dealing with a specific type of exception. All other exceptions 
won't be handled by this code. You see how to deal with these other exceptions In a later section. 


With these Try catch Finally blocks, you Can write code that helps you deal with errors that 
you think might happen In your code. It's always a good practice to wrap code that might throw 
an error In a Try catch block so you can deal with It gracefully. Some examples of codethat may 
throw an exception Include: 

>" Sending e-mail— The mall server may be down, or you may not have the permissions to 
access It. 

>- Accessing a database— The server may be down, you may not have permission to access It, 
you may get an error due to foreign key constraint violations as you saw In Chapter 15, and 
so on. 

Trying to write an upioaded fiieto disl<— The disk may be full, you may not have the neces- 
sary permissions to write to disk, or you are providing an Invalid filename. 

Although Try Catch blocks are great to avoid exceptions from bubbling up to the user Interface, 
you should use them with care, because they come at a cost. A Try catch block Is generally slower 
than code without It, so you shouldn't use a Try catch block for errors you can avoid otherwise. 
Consider the following examplethat divides two numbers: 

VB.NET 

Dim valuel As Integer = Convert . ToInt32 (ValueBoxl . Text) 
Dim value2 As Integer = Convert . ToInt3 2 (ValueBox2 . Text) 
Try 

result = valuel / value2 

ResultLabel .Text = result . ToString ( ) 
Catch ex As DivideByZeroException 

ResultLabel .Text = "Sorry, division by zero is not possible." 
End Try 

C# 

int valuel = Convert . ToInt32 (ValueBoxl . Text ) ; 
int value2 = Convert . ToInt32 (ValueBox2 . Text ) ; 
try 
{ 

result = valuel / value2 ; 
ResultLabel .Text = result . ToString () ; 

} 

catch {DivideByZeroException ex) 
{ 

ResultLabel .Text = "Sorry, division by zero is not possible."; 

} 


690 I CHAPTER 18 EXCEPTION HANDLING, DEBUGGING, AND TRACING 


In this example, the code is set up to expect a DivideByzeroException. This exception is thrown 
when vaiue2 contains the value o. Although at first it seems lil<ea good idea to implement exception 
handling here, it's actually much better to write code that checl<s for this value before the division is 
carried out, instead of letting an exception occur: 

VB.NET 

If value2 <> 0 Then 

result = valuel / value2 

ResultLabel .Text = result . ToString ( ) 
Else 

ResultLabel . Text = "Sorry, division by zero is not possible." 
End If 

C# 

if (value2 != 0) 
{ 

result = valuel / value2; 
ResultLabel. Text = result . ToString () ; 

} 

else 
{ 

ResultLabel . Text = "Sorry, division by zero is not possible."; 

} 

Of course it would even be better if you had placed a comparevaiidator on the page, making sure 
that vaiueBox2 could never contain the value zero. Chapter 9 explains how to use this control. 

Although Try Catch blocks are useful to catch exceptions that you anticipate, what about errors 
you don't? H ow can you deal with unexpected errors? Because they are unexpected, you won't 
know when they occur, so it's difficult to write codeto handlethem. 

To solve this problem, the next section shows you how you can globally catch and log unhand led 
exceptions and send information about them by e-mail. This way, you know they occurred, giving 
you, the page developer, a chance to fix them before they happen again. 

Global Error Handling and Custom Error Pages 

To shield your users from the technical details of the exception, you should providethem with a 
user-friendly error page instead. Fortunately, ASP.N ET enables you to define custom error pages: 
ASPX pages that are shown to the user when an exception occurs. You can map different types of 
errors (server errors, page not found errors, security problems, and so forth) to different pages. 

You define the error page or pages you want to show in the customErrors element of the web. con- 
fig file. A typical element looks like this: 

< customErrors mode="On" def aultRedirect=" ~/Errors/Error5 00 . aspx" 

redirectMode= " ResponseRewrite " > 
<error statusCode="404" redirect=" ~/Errors/Error404 . aspx" /> 
<error statusCode="500" redirect=" ~/Errors/Error500 . aspx" /> 

</customErrors> 

The mode attribute determines whether or not a visitor to your site gets to see a detailed error page. 
The attribute supports thefollowing three values: 
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>■ On— Every visitor to your site always sees tlie custom error page wlien an error occurs. 

>- Off— Tiie custom error page is never siiown and full error details are displayed on the page. 

>• Remoteoniy— The full error details are shown to local users (browsing the site from the same 
machine as the site runs on), whileall other users get to see the custom error page. Thisset- 
ting enables you to see error messages on your site during development, while your users are 
always presented with the custom error page. 

Within the opening and closing tags of the customErrors element you define separate <error /> 
elements, one for each H TTP status code you want to support. The previous configuration defines 
two custom pages: one that is shown when the requested page could not be found (a 404 status 
code) and one that is shown when a server error occurs (a 500 code). 

For all other H TTP status codes you haven't defined explicitly, the defauitRedirect attribute is 
used to determine the custom error page. 

The redirectMode attribute determi nes the way the new page is shown to the user and is discussed 
later in this chapter. 

Although custom error pages shield your users from the exception details, they don't help in inform- 
ing you that an exception occurred. All these pages do is hide the real error and show a page with a 
custom error message instead. To be notified about these exceptions, you could write some code that 
looks at the exception and then sends you an e-mail with the details. Alternatively, you could write 
code that inserts the error details in a database, or writes them to a text file. 

ASP.N ET offers you a handy, central location to write code that is triggered when an exception 
occurs. You write this code in a special event handler called Appiication_Error inside the ciobai. 
asax file that you saw first in Chapter 11. Inside this event handler, you can collect relevant data 
about the exception, sticl< it in an e-mail message, and send it to your own Inbox. This gives you 
detailed information about exceptions that occur on your site, aiding in fixing the problem as soon 
as possible. You see how to write this code in the next exercise. 


||j|ym2^Q Handling Exceptions Site Wide 

In thisTry ItOutyou learn how to write codein the Global, asax file to send the exception message by 
e-mail. Additionally, you see how to create global error pages that are shown to your user in case of an 
error. 

1. If you didn't add the Global, asax file to your sitein Chapter 11, you need to add it first. To do 
so, right-clicl< the website in the Solution Explorer and choose Add oAdd New Item. In the list 
with templates, select Global Application Class. Leave its name set to Global. asax and clicl< Add. 

2. At the top of the Global .asax file, right after the Application directive, add the following 
Import statement. N otethat when adding an import statement in M arkup View, both VB.N ET 
and C#usethe keyword import, rather than imports and using that you normally use in Code 
Behind: 


VB.NET 

<%@ Application Language="VB" %> 

<%@ Import Namespace="System. Net .Mail" %> 
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C# 

<%@ Application Language="C#" %> 

<%@ Import Namespace="System. Net. Mail" %> 

3. Inside the Appiication_Error handler that should already be present in the Global .asax file, 
add the following highlighted code that is triggered whenever an unhandled exception occurs in 
your site. If the handler isn't there, mal<e sure you type all the code from the following snippet, 
including the parts that are not bolded: 

VB.NET 

Sub Application_Error (ByVal sender As Object, ByVal e As EventArgs) 
If HttpContext .Current . Server . GetLastError () IsNot Nothing Then 
Dim myException As Exception = 

HttpContext . Current . Server . GetLastError ( ) . GetBaseException ( ) 
Dim mailSubject As String = "Error in page " & Request .Url .ToString () 
Dim message As String = String. Empty 

message &= "<strong>Message</strong><br />" & myException. Message & "<br />" 
message &= "<strong>Stack Trace</strong><br />" & 

myException. StackTrace & "<br />" 
message &= "<strong>Query String</strong><br />" & 

Request. QueryString.ToStringO &"<br />" 
Dim myMessage As MailMessage = New MailMessage ( "you@example . com" , 

"you@example.com", mailSubject, message) 
myMessage . IsBodyHtml = True 

Dim mySmtpClient As SmtpClient = New SmtpClientO 
mySmtpClient . Send (myMessage) 
End If 

End Sub 

C# 

void Application_Error (obj ect sender, EventArgs e) 
{ 

if (HttpContext .Current . Server .GetLastError 0 != null) 
{ 

Exception myException = 

HttpContext . Current . Server . GetLastError 0 .GetBaseException () ; 
string mailSubject = "Error in page " + Request .Url .ToString () ; 
string message = string. Empty; 

message += "<strong>Message</strong><br />" + myException. Message + "<br />"; 
message += "<strong>Stack Trace</strong><br />" + myException. StackTrace + 
"<br />"; 

message += "<strong>Query String</strong><br />" + 

Request .QueryString. ToString 0 + "<br />"; 
MailMessage myMessage = new MailMessage ( "you@example. com" , 

"you@example.com", mailSubject, message); 
myMessage . IsBodyHtml = true; 
SmtpClient mySmtpClient = new SmtpClientO; 
mySmtpClient . Send (myMessage) ; 

} 

} 


Don't forget to change the two e-mail addresses that are passed to the MaiiMessage's constructor. 
The first address represents the sender's address, and the second one holds the recipient's address. 
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4. Save all your changes and close the Global, asax file. 

5. N ext, open up theweb.conf ig file, and as a direct child of <system.web>, add the following 

customErrors element: 
<system.web> 

<customErrors mode="On" def aultRedirect="-/Errors/OtherErrors . aspx" 
redirectMode="ResponseRewrite"> 
<error statusCode="404" redirect="-/Errors/Error404 . aspx" /> 
</customErrors> 

Save and close the configuration file. 

Create a new folder in the root of your website and call it Errors. 

Insidethis new folder, create two new Web Forms and call them Error404 .aspx and 
otherErrors . aspx, respectively. M ake sure both of them are based on your custom template so 
they are using the main master page and inherit from BasePage. If you followed the exercises in 
the previous chapter and now use Profile to store the user's favorite theme, refer to the Common 
M istal<es section at the end of this exercise to learn about the pitfalls of using the master page and 
BasePage for your custom 404 error page. 

Set the Title of Error404 .aspx to File Not Found. Inside the Content placeholder for the main 
content, add the following marl<up: 

<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" runat= " Server" > 
<hl>File Not Found</hl> 

<p>The page you requested could not be found. Please check out the 
<a href="-/" runat=" server" >Homepage</a> 

or choose a different page from the menu.</p> 
<p>The Planet Wrox Teain</p> 

</asp : Content > 

Switch to Design View, double-clicl< the page to set up a page_Load handler, and add the follow- 
ing code to it: 

VB.NET 

Protected Sub Page_Load{ sender As Object, e As EventArgs) Handles Me . Load 
Response . Status = "404 Not Found" 
Response . StatusCode = 404 
Response. TrySkipIisCustomErrors = True 

End Sub 

C# 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

Response . Status = "404 Not Found"; 
Response . StatusCode = 404; 
Response. TrySkipIisCustomErrors = true; 

} 

10. 0 pen the generic otherErrors . aspx page, set its Title to An Error Occurred, and enter the 
following content: 

<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" runat= " Server" > 
<hl>An unknown error occurred</hl> 


6. 
7. 


8. 
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<p>An error occurred in the page you requested. The error has been logged and 

we'll fix it ASAP.</p> 
<p>The Planet Wrox Team</p> 

< /asp : Content > 

11, Double-click the page in Design View and add the following code to the page_Load handler: 


VB.NET 

Protected Sub Page_Load (sender As Object, e As EventArgs) 
Response. TrySkipIisCustomErrors = True 

End Sub 

C# 

protected void Page_Load (object sender, EventArgs e) 


Handles Me. Load 


Response. TrySkipIisCustomErrors = true; 


Because this page will be used for all possible errors except a 404 error, there's no point in setting 

an explicit status or StatusCode. 

12. Save the changes to all open files by pressing Ctrl+Shift+S and then close them. Right-clicl< 
Default. aspx in theSolution Explorer and chooseView In Browser. Once the page has fin- 
ished loading, request a nonexistent page lil<eDefauitTest. aspx by changing the address bar of 
the browser to something lil<ehttp://iocaihost:49i86/DefauitTest.aspx. Obviously, the 
DefauitTest .aspx page does not exist, so you get an error. But instead of a detailed error page, 
you should now get the error page you defined and created in thisTry ItOut, shown in 
Figure 18-4. 


\W Opera 


Qj File Not Found 


<- ^ O Ov. ©Web localhost 







Gig Pics 

About 

Login 


Select a Theme 


File Not Found 


The page you requested could not be found. Please check out the Homepage or choose a different page from the 
menu. 

The Planet Wrox Team 
Q * O 



FIGURE 18-4 
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COMMON MISTAKES If, instead of this error message, you get a generic "File 
not found" exception page, check the syntax of the customErrors section in the 
Web . conf ig file. Additionally, checl< that you can successfully view the actual 
error pages ('Error4 04 . aspx and otherErrors . aspxj by directly requesting 
them in the browser If they contain an error (for example, if you forgot to set the 
page title) they cannot be used as custom error pages. 

You'll also get the generic error page when you followed the exercises in the 
preceding chapter and rewrote the preferred theme selector to use Profile. 
Because of the way a 404 error is handled internally, you cannot use Profile in 
the error page or the master page it's based on. To work around this problem, 
re-create the Error4 04 . aspx page as a standard Web Form not using your 
master page and BasePage and things should work fine. You could also set the 
redirectMode attribute in the Web. conf ig fO ResponseRedirect, but from a 
Search Engine Optimization (SEO) point of view this is not recommended. You'll 
learn more about the redirectMode attribute and why ResponseRedirect is not 
the optimal solution in the How it Works section. 


Besides the error page in tlie browser, you sliould also get a message by e-mail that provides more 
details about the error. Figure 18-5 shows the message you get when you request a page that does 
not exist. 


Junk Delete Reply Reply Forward Instant Add to Move Copy Flag Watcti „, Previous Next 

all ■• message calendar to to Encoding 

Delete Respond Actions Navigate 

Error In page http://localhost49186/DefaultTestaspx 

planetwrox@ecample.com (planetwrox@example.com) Add contact 8/25/2012 5:03 AM 

Tc planetwrox@example.com; 

Message ^ 

The file 7DefaultTest.aspx' does not exist. I 
Stack Trace ' 

at System.Web..UI.Util.CheckVirtualFileExists{VirtualPath viilualPath) at 

System.Web.Compilation.BuildManager.GetVPathBuildResultlnternalCVirtualPath virtualPath, Boolean noBuild, 
Boolean allowCrossApp, Boolean allowBuildlnPrecompile, Boolean throwlfNotFound. Boolean ensurelsUpToDate) at 
System.Web. Compilation. BuildManager.GetVPathBuildResultWithNoAssert(HttpContext context, VirtualPath 
virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildlnPrecompile, Boolean throwlfNotFound, 
Boolean ensurelsUpToDate) at System.Web. Compilation. BuildManager.GetVirtualPathObjectFactory(VirtualPath 
virtualPath, HttpContext context. Boolean allowCrossApp, Boolean throwlfNotFound) at 


FIGURE 18-5 
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I n the next chapter, you learn how to turn this feature on and off through configuration so you 
can disabie it during deveiopment. 

How It Works 

Two important parts areworth examining in this exercise. The first part istheway theASP.N ET run 
time hides the "Yellow Screen of Death" with the error details from the user with the use of custom 
error pages. This serves two purposes. First, it helps you protect potentially privatedata I il<e passwords 
or information about database connections that may end up in the error message. Second, it shields 
your users from cryptic error messages they probably don't understand anyway and gives you the 
chance to display a good-looking error page instead that integrates with the site's lool< and feel. 

The only thing you need to do to mal<e this worl< is to enable custom errors in the web.config file and 
provide one or more pages you want to display for the errors that may occur in your site. The configu- 
ration element lets you set up different pages for different exceptions: 

<customErrors mode="On" defaultRedirect=" -/Errors /OtherErrors . aspx" 
r edi r e c t Mode = " Re spons eRewr i t e " > 
<error statusCode="404" redirect="~/Errors/Error404 . aspx" /> 
</custotnErrors> 

W hen .N ET encounters a 404 exception (when you request a page that cannot be found), the contents 
of the Error4 04 .aspx page are shown. The name and content of this page are completely up to you, 
giving you the option to provide your own explanation to the user about what went wrong. N ote that 
this worl<s only for file types that are registered with ASP.N ET, lil<e .aspx files. It won't work out of 
the box for .htmi files or images when you're not using the Integrated Pipeline mode of IIS, M icrosoft's 
web server. You see more about the Integrated Pipeline mode in the next chapter. 

This exercise contains two key elements to improve SEO . First, notice how the redirectMode is set 
to ResponseRewrite. The Other Option is ResponseRedirect. Remember the difference between 
Server . Transfer and Response . Redirect from C hapter 7? T hese two setti ngs are based on the same 
principles. If you set redirectMode to ResponseRedirect, the browser (and thus a Search engine) is 
redirected to the error page. The error page then returns a 404 code so the search engine thinks that 

the error page itself could not be found. If, however, you set redirectMode to ResponseRewrite, 

theoriginally requested page results in a 404 error codeand the contents of the Error4 04 .aspx page 
are streamed to the browser. This enables search engines to correctly update their indexes. The only 
downside of the ResponseRewrite Setting is that you can't use Profile in the page or a master page it is 
based on. As you saw earlier, the best work around is to create a page that is not based on your custom 
template. 

The second part that improves SEO is the code in the Code Behind of Error4 04 .aspx. That code sets 
the H TTP status code to 404 to indicate the page could not be found on the server. Without these two 
lines of code, search engines won't understand the page doesn't exist and will keep trying to index it. 

N otice that only the 404 error code is redirected to its own page. All other exceptions cause the generic 
OtherErrors. aspx to be loaded. You Can, however, add multiple <error /> elements to the<custora- 
Errors> element, each one for a different status code. For a list of H TTP status codes, check out this 

knowledge base article: http: //support .microsoft . com/default .aspx/kb/943891. 

N ote the call to Response. TrySkipiisCustomErrors. This tells I IS that it should not try to render its 
own custom error pages. Without this setting, you may get IIS's generic error pages instead of the ones 
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you defined here. You won't notice the difference with IIS Express, so this code won't come into piay 
untii you depioy your site to a production version of IIS as you'ii see in the next chapter. 

The other main part of this exercise is the code in Global, asax that fires when an unhandied excep- 
tion occurs. In that case, the Appiication_Error event handier is triggered. W ithin this handier, you 
can retrieve the exception that occurred with this code: 

VB.NET 

If HttpContext . Current . Server .GetLastError ( ) IsNot Nothing Then 
Dim myException As Exception = 

HttpContext . Current . Server . GetLastError { ) .GetBaseException ( ) 

C# 

if (HttpContext . Current . Server . GetLastError ( ) != null) 
{ 

Exception myException = 

HttpContext . Current . Server . GetLastError { ) .GetBaseException ( ) ; 

To get at the root exception that caused the probiem in the first piace, you need to caii 

GetBaseException { ) On the Exception that iS returned by Server .GetLastError ( ) . This Exception 

instance, stored in the myException variabie, then gives you access to usefui properties such as 
Message and stackTrace. I n this exercise, the stackTrace dispiayed in the error e-maii contains infor- 
mation that reaiiy isn't of any interest to you. H owever, with other exceptions, such as one thrown by 
an incorrect configuration of the maii server or a division by zero exception, the stackTrace gives you 
information about the fiie that generated the error, the method that caused it, and even the iine number 
in the code, mai<ing it easy to find the error and fix it. 

The remainder of the code creates an e-maii message with the error detaiis. It aiso adds information 
about the query string with this code: 

VB.NET 

message &= "<strong>Query String</strong><br />" & 
Request . QueryString . ToString ( ) & "<br />" 

C# 

message += "<strong>Query String</strong><br />" + 
Request . QueryString . ToString ( ) + "<br />"; 

Knowiedgeof the query string heips in debugging a probiem if vaiuesfrom the query string are used. 
You couid extend thecodein Appiication_Error and add other usefui information such as cooi<ies 
and form coiiections. For more information about accessing these i<inds of coiiections, pici< up a copy 
of Professionai ASP.N ET 4.5 pubiished by Wrox. Aiternativeiy, iooi< into ELM AH —the Error Logging 
M oduies and H andiers project— at http://code.googie.eom/p/eimah/, which is an open source 
project run by Atif Aziz that is aimed at catching and iogging exceptions. The beauty of the ELM AH 
project is that it's extremeiy simpieto integrate in your site (no programming required, you just need to 
add a few iines of configuration code to your web.conf ig fiie). And even better: there's a N uGet paci<- 
age avaiiabiethat adds the necessary fiies and configuration foryou. Simpiy run thefoiiowing com- 
mand from the Paci<age M anager Consoie: 

Install-Package Elmah 
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After you have installed ELM AH , you can get a list of the errors that occurred In the site by requesting 
a special page called eimah.axd: 

http : //localhost : 4 93 94/elmah . axd 

By default, you can access this page only from the local machine. Besides showing the errors In eimah 
.axd, you can also configure ELM AH to store errors In the database, send them by e-mall, provide 
them as an RSSfeed, and much more. Check outtheELM AH project site for more Information. 

I have been using ELM AH for most of my production websites for the past couple of years, and It has 
helped mefind many bugs that otherwise would have gone unnoticed. 


Although the ability to handle and log exceptions at run time Is useful. It's of course better to pre- 
vent them from happening In the first place. To writesolld codewlth as few bugs as possible, you 
need good tools to help you understand the execution of your code so you can debug It. VS comes 
with excellent debugging tools that aid you In this process. You see what these tools are and how to 
use them In the next section. 


THE BASICS OF DEBUGGING 

Debugging Is the process of finding and fixing bugs In your code. Although that may sound easy. 
It often Isn't. Some bugs are very obvious and easy to spot and thus easy to fix. 0 thers are much 
harder to find and require knowledge about the execution environment of your program. The debug- 
ging tools that ship with Visual Studio help you understand this execution environment by giving 
you direct access to the Inner workings of your program or web page. 

Debugging with VS Is like snapping your fingers to stop the time. W hen you do that, everything 
halts, except for you, so you can walk around In your code. Investigate variables, look Into objects, 
try out methods, and even execute new code. To tell VS whereto halt, you need to set one or more 
breakpoints In your code. When the code under the breakpoint Is about to be executed, VS stops the 
execution of the application (usually a web page, a user control, or code In theApp_code folder) and 
then puts focus back on VS so you can diagnose the code and Its environment. 

You set a breakpoint by pressing F9 on the line of code where you want execution to halt. Instead of 
the F9 shortcut key, you can also click the margin of the code, where the big dot appears In Figure 
18-6, or you can choose Debug o Toggle Breakpoint from the main menu. Pressing F9, clicking the 
same spot In the margin, or choosing the menu Item again toggles the presence of the breakpoint. To 
clear all breakpoints In your entire website, press Ctrl-f-Shlft-ff 9. 

To give you an Idea of how debugging works, and what It can do to help you, the following exercise 
shows you the basic operations of debugging. Later parts of this chapter give you a detailed look at 
the numerous debugging tools and windows that ship with VS. 


TRY IT OUT 


Debugging Your Application 


In this Try It Out, you debug the Calculator page you created In a previous chapter. If you don't have 
the file, refer to Chapter 5 or download the code for this chapter from www.wrox.com. The debugging 
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exercises in this cliapter assume you are using Internet Expiorer as your browser. If you are using a dif- 
ferent defauit browser, sucli as Firefox or Opera, tiie debugging experience wiii be iargeiy tiie same, 
aitiiougii you may find tiiat VS does not aiways get tiie focus automaticaiiy wiiiie breai<ing into your 
code. 

1. Open tile CalculatorDemo.aspx page from tiie Demos foider and switcli to CodeBeliind. 

2. Ciici< tiie first iine of code in tiie caicuiateButton_ciick iiandier tliat clieci<s tiie iengtii of tlie 
text in tiie two Texteox controis. Tiien press F9 to set a breai<point. Tiie iine gets liigiiiigiited, as 
sliown in Figure 18-6, and a coiored dot appears in tiie margin of tiie Document Window. 



Demos_CalculatorDemo • ®* CalculateButton_Click(object sender, EventArgs e) 



E 

] protected void Page Load(object sender, EventArgs e) 
{ 

1 protected void CalculateButton Click(object sender, rventArgs e) 

{ 

J. 

T 


E 


• 



1 



{ 

double result = 0; 

double valuel = Convert. ToDouble(ValueBoxl. Text); 
double value2 = Convert. ToDouble(ValueBox2. Text); 


100 % 

- i ► 




FIGURE 18-6 


3. Press F5 (instead of Ctri-ff 5, wiiicli you liave been using so far) to open tiie website in your 

browser and start tiie debugging process. Aiternativeiy, ciioose Debug o Start Debugging from tlie 
main menu. If you get tlie diaiog box in Figure 18-7, ciici< OK to liave VS modify tiie web.config 
file for you. 



Debugging Not Enabled 


The page cannot be run in debug mode because debugging is not enabled in the Web.config file. 
What would you like to do? 


® Modify the Web.config file to enable debugging. 

. Debugging should be disabled in the Web.config file before deploying the Web 
• site to a production environment. 


O Run without debugging. (Equivalent to Ctrl+F5) 


OK 


Cancel 


FIGURE 18-7 


Depending on your browser's setup, you may be confronted witii a diaiog box (in Internet 
Expiorer only) about enabling Script Debugging. If you get tiiat diaiog box, follow the instruc- 
tions it displays, return to VS, and clicl< the Yes button. 

4. The page should load normally, showing you the two TextBox controls, the DropDownList, and 

the Button. 
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COMMON MISTAKES If you get an error stating that the page title is not valid, 
close your browser, return to VS, give the page a title, save your changes, and 
press F5 again. 


Enter 5 in the first text box, 7 in tlie second, and tiien ciici< tlie Caicuiate button. Instead of see- 
ing tiie answer in your browser, you are now tai<en baci< to VS. If you're not tai<en baci< to VS 
directiy, you may need to switcli to it manually. You'll see thetaskbar icon for VS flash to get your 
attention. 

5. In VS, the line with the breal<point is now highlighted in yellow. Additionally, you see a yellow 
arrow in the document margin to indicate this line of code is about to be executed. H owever, 
before it does, you get a chance to look at your controls, variables, and other elements that make 
up the execution environment. To see the values you entered in the TextBox controls, hover your 
mouseover the Text properties in the highlighted lines. You'll see, as shown in Figure 18-8, a 
small tooltip appear that displays the value you entered. 


O if (ValueBoxl.T^. Length > e && ValueBox2. Text . Length > 0) 

{ > ValueBoxl.Text Q. • "5" a- 

double result = 0; 
|M double valuel = Convert. ToDouble(ValueBoxl. Text); 

^ double value2 = Convert. ToDouble(ValueBox2. Text); 


FIGURE 18-8 


6. H over your mouseover some of the variables in the code like result and vaiuei. N ote that you 
won't get a tooltip, because the code hasn't reached the point where these variables are declared. 
As far as the debugger is concerned, they don't exist. 

7. To advance in the code, press FIO. This steps over the selected line, executing it. Keep pressing F 10 
until the line that declares the vaiue2 variable is highlighted. When you now hover your mouse 
over valuel, the tooltip appears, indicating that vaiuei now contains the value 5 . 0. 

8. H over your mouseover the seiectedvaiue property in the select case (in VB.N ET) or switch 
statement (in C#). N ote that the tooltip shows you the value you selected in the drop-down list (the 
plus symbol). Even if this line of code hasn't been executed, the DropDownList control has been 
instantiated and its seiectedvaiue has been assigned a value earlier so you can look at it here. 

9. Right-click the line that assigns the value to theResuitLabei control and chooseRun to Cursor. 
This executes all codefrom the current breakpoint up to this 
line. H over your mouse over the result variable (you may 
need to highlight the result variable first with your mouse if 
you are using VB.N ET) and note that it displays the value 
12 . 0, which is the outcome of the calculation, shown in „ 

FIGURE 18-9 

Figure 18-9. 

10. Finally, press F5. By pressing this key, the code continues until it finds the next breakpoint. Because 
you haven't defined another breakpoint in your code, the remainder of the code in the ciick event 
handler is executed and the result is displayed in the page. 


break; 

) 

ResultLabel.Text = result. ToStringO; 

0 result 12.0 - 
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How It Works 

W henever you press Ctrl 4f 5 to view a page in a browser as you liave done up untii this cliapter, notli- 
ing special liappens. VS simpiy opens tlie browser, wliicli tlien requests the page from 115 Express. 
H owever, wlien you press F5 instead, VS gets in debugging mode and respects tlie breal<pointsyou liave 
set in your code. W lienever a breal<point is liit, execution of tlie code is stopped so you can lool< at tlie 
code and its execution environment, which gives you access to variables, controls, methods, and much 
more. N ote that the code on the line with the breal<point has not been executed at this point. To con- 
tinue executing the code, use F 10, F 11, or F5. You see more of these shortcuts later. 

Before you can debug your code, you need to configure the application to support it. You do this by set- 
ting the debug attribute of the compilation element in Web.config to true; 

<compilation debug="true" > 

If you're using Visual Basic, you may see two additional attributes on this element: strict and 
explicit. By default, strict is set to false, which means Visual Basic will do silent casts and conver- 
sions for you. The explicit attribute is set to true, which means you need to declare all your variables 
before you can use them. 

W henever you start debugging and the debug attribute of the <compiiation /> is set to false, you 
get the dialog box shown in Figure 18-7 offering to turn it on for you. To avoid the overhead this set- 
ting brings, you should always set it to false on a production server. You see more of this in the next 
chapter. 

In this exercise you also learned how to use data tips, the small tooltip windows that appear when you 
hover your mouse over selected variables. For simple types, such as an integer or a string, all you see 
is the variable's value. For complex types, such as results returned from a LIN Q query, you get a much 
richer data tip, providing you with a lot more detail. 


Useful as the debugging data tips may seem, they are only a small part of the rich debugging fea- 
tures. In the next section, you get an overview of all the debugging tools that ship with VS. 


TOOLS SUPPORT FOR DEBUGGING 

W ith a number of shortcut keys and menu items, VS lets you move around the code that you are 
debugging, giving you the option to execute code line by line or larger blocl<s of code at once. 
Additionally, the IDE provides you with a lot of windows that enable you to diagnose and change 
the execution environment, including the values of variables at run time. You see how to move 
around code first, which is followed by a discussion on the numerous debugging windows. 

Moving Around in Debugged Code 

When your code has halted on a breakpoint, you can use a number of keyboard shortcuts to deter- 
minewhat to do next. Thefollowingtableliststhe most common shortcuts. 
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KEY 

DESCRIPTION 

F5 

Press this key to start debugging, as demonstrated in the previous exercise. 
When you press this key during debugging, the code continues until the next 
breakpoint is hit, or until all code is finished executing. 

F11 

Press this key to execute the current line and step into a member that's being 
called, if possible. You see how this works later. 

F10 

Press this key to execute the current line without stepping into the code that is 
being called, unless that code itself contains a breakpoint. 

Shift+FII 

Press this key combination to complete the code in the current code block and 
return to the code that initially called it. 

Shift+F5 

Press this key combination to stop debugging. 

Ctrl+Shift+F5 

Press this key combination to restart the debugging process. 


In addition to these i<eyboard sliortcuts, you can aiso use the 
Debugging tooibar siiown in Figure 18-10, whicii offers simi- 
lar functionality. 

This toolbar should appear automatically when you start 
debugging, but if it doesn't, right-clicl< an existing toolbar 
and choose Debug. To start debugging using the toolbar, 
press the button w ith the green arrow on the Standard 
toolbar. 


Pause Restart 


Step Into (F11) 

Step Out (Shift+FII) 


II ■ e> ^ ^. ^ cj - 


stop (Shift+F5) 


Step Over (FIG) 


Show Next Statement 
FIGURE 18-10 


W hileyou are debugging your code in VS, you have a num- 
ber of debugging windows at your disposal, which are discussed in the following section. 

Debugging Windows 

The numerous debugging windows enableyou to watch the variables in your application and even 
change them during run time. Additionally, they provideyou with information about where you are 
in the application and what code was previously executed. All this information helps you understand 
the execution flow of your application. 

You access all the debugging windows through the Debug o Windows menu option. Not all of them 
are available in the Express edition of Visual Studio. Also, to access most of the windows, your 
application must bein debug modefirst. The next sections show you the different windows that are 
available. In the exercise that follows, you geta chance to worl< with them so you understand how 
to use them and why they are useful. 


Watching Variables 

Knowing the values of your variables is critical to understanding your application. To help you 
with this, VS offers three debugging windowsthat provideyou with useful information. All these 
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windows support changing tlie vaiueof your variabies at run time, enable you to use data tips to dig 
deeper into tlie objects, and enabieyou to copy and paste data so you can reuse it somewliere eise. 

The Watch Window 

Tliis is probabiy tlie most important window for you to i<eep an eye on. It enabiesyou to watcli vari- 
abies you're interested in and dig into tliem. Figure 18-11 sliows tlie Watcli window tliat iscurrentiy 
watcliing tlie vaiuei variable used in tlie Calculator page while the vaiue2 variable is being added 
to the list. 


Watch 




Name 

Value 

Type 


0 valuel 
value] 

5j0 

dou 

ii. 


^ ValidationSummaryDisplayMode 




^ ValidatorCollection 





# ValidatorDisplay 





' — > Validators 








0 valuel 




Dvalue2 ^ 

(local variable] double value2 

*. ValueBoxl 




*. ValueBox2 




*q ValueType 





FIGURE 18-11 


You can add your variables to the Watch window in a few different ways. First of all, you can click 
the Watch window once and then start typing a variable name. You can then press Ctrl-f-Spaceto 
bring up the Intel I iSense list, making it easy to complete the variable's name. Alternatively, you can 
right-click a variable in the code editor and choose Add Watch. And finally, you can highlight a vari- 
able in thecodeeditor and then drag it into theWatch window. 

W hen your variables are in theWatch window, you can change their values to influence the execu- 
tion of your code. For example, you could change the vaiueof the vaiuei variable to a different 
number, changing the outcome of the calculation. To change a value, double-click it in the Value 
column of theWatch window. Alternatively, right-click thewatched variableand choose Edit Value. 

Besides showing variables' values, you can also use theWatch window to execute code. For exam- 
ple, you could call Tostringo on the valuel variableto seewhat its string representation looks 
like. To do this, double-click the variable name in theWatch window so it becomes editable, add 
.Tostring 0 as shown in Figure 18-12, and press Enter. 


Watch 



^ H X 

Name 

Value 

Type 


* valuel .ToStringO 

"5" 

» string 

— n 

0 value2 

7.0 

double 



FIGURE 18-12 


You are not limited to calling Tostring in theWatch window. M ost expressions that produce a 
value can be executed here, but there are some exceptions (such as LIN Q queries). H owever, the 
Immediate window, discussed later, is much more appropriate for executing code on the fly. 


704 I CHAPTER 18 EXCEPTION HANDLING, DEBUGGING, AND TRACING 


In addition to tlieWatcli window, tlieAutosand Localswindowsare avaiiabie. Tliey wori< moreor 
iess tile same as tiieWatcii window. 

The Autos Window 

Tiie Autos window isavaiiabieoniy in tiiecommerciai versions of Visuai Studio and not in tlie 
Express edition. Because it's so similar to the Watch window, this isn't really a problem. TheAutos 
window showsthe variables used by the current and previous code statements and is updated auto- 
matically as you step through the code. 

The Locals Window 

The Locals window is also similar to the Watch and Autos windows, but the Locals window 
shows all variables that are currently in scope (they can be "reached" by the code that is currently 
executing). This is a useful window, because it shows you all relevant variables without requiring 
you to add them manually. 

Other Windows 

Besides windows to watch variables, VS has a few other useful windows available. 
The Breakpoints Window 

The Breal<points window gives you an overview of all breakpoints you have set in code throughout 
your entire website. Unfortunately, this window is not available in the Express edition, so you have 
to find breal<points manually by looking at the actual code. 

Call Stack Window 

The Call Stack window provides you with information about the order in which your code has been 
executed or called. Each call from one piece of code into another is placed on a stack of calls that 
you can navigate. It looks a bit cryptic at first, but once you understand how it works, it enables you 
to jump through your code quite easily. Figure 18-13 shows the Call Stack window inside the Add 
method of the calculator class. 


Call Stack ^:.:.:-:.:.:.x.:.:v:.:.:.:...x.:.:.:.vv;.:.:...x.:.:.:v:.:.:.:™:.:.:.;.:v:.:.,.. 

- n 


Name 

Langu 


* App_Code.agrmuql3.dlllCalculator.Add(double a, double b) Line 13 

c. 


App_Web_gbw4i4ln.dll!Demos_CalculatorDemo.CalculateButton_Cli 
[External Code] 

cWobject C» 



FIGURE 18-13 


In the highlighted line, you can see that calculator .Add is the currently active code. Right below 
it you see caicuiateButton_ciick, the event handler in the Calculator page that called the Add 
method. Double-clicking a line in the Call Stack window takes you to the appropriate code location. 
At the bottom you see [External Code], which refers to executed code that is not part of your web- 
site, such as executing code coming from the .N ET Framework. To expand the [External Code] item 
to see what it contains, right-click the Call Stack window and choose Show External Code. 
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Immediate Window 

The last interesting debugging window is tiie Immediate window. Tiiis window enables you to 
execute code as if you had written it in a page, for example. You can use this window to test expres- 
sions, see what values a function returns, and so on. For example, when you are in debug mode, you 
can enter the following command in the Immediate window: 

VB.NET 

? New Calculator 0 .Add(3, 4) 
C# 

? new Calculator 0 .Add (3, 4); 

Thequestion mark isused to output to thelmmediate window. The code then instantiates a new 
Calculator instance and directly passes the values 3 and 4 to its Add method. The code is executed 
and the Add method returns v, which is then printed in the Immediate window. 

This window is great for quickly testing out code. Instead of writing code you want to test in a page, 
you can type it directly in thelmmediate window and see its output. 

In thefollowing Try It 0 ut, you see these debugging windows at work. 


lljlUmg^Q Extensive Debugging 

In this exercise, you look at all the debugging windowsthat have been discussed earlier. Becausea lot 
of windows and options are available, you won't see a detailed discussion of every step in the process. 
Instead, you're encouraged to experiment. Try adding more variables to theWatch window, type your 
own code in the Immediate window, and so on. Experimenting is the best way to discover the large 
number of debugging capabilities in VS. 

1. If you're still in debug mode from the preceding exercise, press Shift 4f 5 or press the Stop but- 
ton on the debugging toolbar. Open the Code Behind of caicuiatorDemo.aspx again and press 
Ctrl-f-Shift-ff 9 to dear all previously set breakpoints in all code files. Click Yes to confirm the 
deletion. 

2. Click the line that declares the variable vaiuei and press F9 to set a breakpoint. Your Document 
Window should look similar to Figure 18-14, which shows the Document Window for theC# 
project. 


Ca 

leu 

BrauHHraraBK^K^^a CaicuiatorDemo.aspx Calculator.cs ^ X 


^ Demos_CalculatorDemo ' CalculateButton_Click(object sender, EventArgs e) 



|fc 

protected void CalculateButton Click(object sender, rventA-gs e) 

{ 

if (ValueBoxl. Text. Length > 0 && ValueBox2 .Text . Length > B) 
{ 

double result = Q; 

double value2 = Convert. To[>ouble(ValueBox2. Text); 
Calculate- myCalculator = new Calculate -(); 

_i_ 

T 




• 



100 % 

• i > 




FIGURE 18-14 
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4. 


Press F5 or choose Debug o Start Debugging from the main menu to start debugging the applica- 
tion. Enter the number s in the first text box, ensure that the pius sign is selected in the drop-down 
list, and enter v in the second text box. Then clicl< the Calculate button, and VS breaks at the 
breal<point you set in the previous step. If you aren't tal<en there automatically, switch bacl< to VS 
manually. 

H over your mouseover the operatorList variable that is used a few lines below the current 
breakpoint and notice how VS displays a data tip with a plus (4-) symbol in front of it. This means 
you can expand the item to get detailed information about the variable. Figure 18-15 displays the 
expanded data tip for C#. 


double result = 0; 

double valuel = Convert. ToOouble(ValueBoxl. Text); 
double value2 = Convert. ToDouble(ValueBox2. Text); 

Calculator nyCalculator = new Calculatc^O; 




: (reratcrList [S 

ti- 

case "+" 


^* 0 base{Syrtem.Web.UI.WebControls.ListControl} 

{System.Web.UI.WebControls.DropDownList} 

result 

= myCal 

+ > BorderColor 

"{Name=0, ARGB=(0, 0, 0, 0)}" 

break; 


> BorderStyle 

NotSet 

case "-" 


S M BorderWrdth 

(} 

result 

= myCal 

A Selectedlndex 

0 

break; 


> SuppOftsDisabledAttribute 

true 

case """ 
result 


I+; 0 Non-Public members 


= myLaicuiaTor.nuiTipiytvaiuei, vaiue..;;; 



breakj 


FIGURE 18-15 


N ote that you can expand other items such as thesorderwidth property. If you're using C#, 
you can also expand base to seetheDropDownList control's base class's properties such as 
seiectedvaiue. With V B.N ET, the properties of the base class have been merged into the main 
Intel 11 Sense list so you'll see seiectedvaiue at the bottom of the list. 

5. Right-click vaiueBoxi in the code at the top that checks the length of the text in the TextBox con- 
trolsand chooseAdd Watch. The variable is added to theWatch window where you can expand 
it, similar to how you expanded the data tip. Expand the item, scroll down in the list to the Text 
property, and you'll see its value is set to " s" . 

6. Double-click the value " 5" for the Text property, change it to " 12" (including the quotes), and 
press Enter. 

7. Open the Locals window (choose Debug o Windows o Locals if the window isn't visible yet.) 
Press FIO to execute the line under the breakpoint. This gets the value from vaiueeoxi, converts 
it to a double, and assigns it to vaiuei. Look at the vaiuei variable in the Locals window (see 
Figure 18-16 that shows the window for the C# website). It now contains 12 . 0, the value you 
assigned to the Text property of the text box in the previous step, now converted to a double. 

N ote that the value of the vaiuei variable has changed color as well. This is done to indicate that 
the item has recently been changed. Also note that because all of this is happening at the server 
during a postback, the browser is unmodified, and the text box still shows the value 5. Only when 
the page has finished rendering to the browser will you seethe new value show up. 
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Locals 


- 

n X 

Name 

Value 

Type 




{ASP.demos_c3lculatordemo_aspx} 

Demos_CalculatorDemo {ASP.demos_calculatordemo_aspx} 



S 0 sender 

{Text = "Calculate"} 

object {System.Web.UI.WebControls.Button} 



m 0 e 

{System.EventArgs} 

System.EventArgs 



0 result 

0.0 

double 



0 valuel 

12.0 

double 



0 value2 

0.0 

double 



0 myCalculator 

null 

Calculator 




FIGURE 18-16 


8. 


9. 


10. 


In Figure 18-16, you also see the other variables that are currently in scope, such as result, 
myCalculator, and this (Me in Visual Basic) that contains a reference to the page that is cur- 
rently being executed. 

Press FIO once more so vaiue2 is updated as well. The color of the value of the vaiue2 variable 
has changed to red to indicate it has changed, whereas vaiuei's value is black again. This mal<es it 
easy to see what variables are modified by the last statement. 

Press FIO until you reach the line that calls the Add method on the calculator class. Instead of 
pressing FIO to execute that line, press Fll. This steps into 
the Add method so you can see how it performs the calcula- 
tion. Inside the Add method, you can hover over the meth- 
od's arguments to see their values, as demonstrated in 
Figure 18-17. 


public double Add(double a, double b) 
{ ^0 a 12.0 a- 

return a + b; 

1 


FIGURE 18-17 


Choose Debug o Windows o Call Stacl< to bring up the Call Stacl< window (or press Ctrl -f-A I t-fC) 
and note that the Add method was called by the caicuiateButton's ciick handler, shown in 
Figure 18-18. 


Name Langui 


App_Code.7Ivxgl5q.dll!C3lculator.Add(double a, double b) Line 12 


App_WebjaOfcb2g.dll!Demos_CalculatorDemo.CalculateButton_Click(object sender, C* 

[External Cede] 


FIGURE 18-18 


11. Double-clicl< the second linein theCall Stacl< window and you aretal<en back to theCalculator 
page. The line that called the Add method is highlighted in green. N ote that this doesn't execute any 
code; all it does is show you the relevant code. Double-click the first line and you are taken to the 
Add method code again. 

12. Press Shift-ff 11 to step out of the Add method and return to the calling code in the Calculator page. 
If you takeanother look attheCall Stack window, you'll seethe line for the Add method hasdisap- 
peared from the call stack. At this point, the result variable does not have a value yet because the 
line of code hasn't been fully executed. 

13. Open thelmmediateWindow (chooseDebug o Windows^ Immediate) to test out some code. In 
the window that appeared, type the following and press Enter: 
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VB.NET 

? New CalculatorO .Multiply (4 , 12) 
C# 

? new Calculator {) .Multiply (4, 12); 

The Immediate window dispiaystlie outcome of tlie calculation, as shown in Figure 18-19. 


Immediate Window 


? new CalculatorO. Hultiply(4, 12); 


48. e 


4 



FIGURE 18-19 

14. PressFlO to finish executing the line with calculate. Add. The yellow marker in the margin of the 
code editor jumps to the end of the select case / switch block. Drag the marker back to the line 
with Calculate. Add. This Changes the line that is executed next so you can repeat part of the code 
that has already executed. You can then press Fll again to step into theAdd method, or press FIO 
to execute the line directly. 

15. Finally, press F5. This executes the remainder of the code in the page. The focus is put on the 
browser again, which now displays the outcome of the calculation in the Label control. If every- 
thing turned out as planned, you should seethe number 19: the sum of 12 (the new value you 
entered for vaiueBoxi.Text in step 6), and 7 (which you entered in step 3). 

How It Works 

As demonstrated in a previousTry It Out exercise, when you put a breakpoint in your code, execution 
is halted as soon as the line with the breakpoint is about to be executed. From there, you can jump 
around in your code, investigate variables, and execute statements. In this exercise you saw how to step 
in and over code using the FIO and Fll shortcut keys. You usually use FIO to execute a line if you're 
not interested in seeing the underlying code that is being called. You use Fll if you want to seethe code 
that is being executed, as you saw how to do with theAdd method. 

The data tips and Watch and Locals windows are invaluabletools in examining and changing variables 
and values. For example, even though you entered 5 in the first text box in the browser, you were able 
to change that valueto 12 during debugging. Any changes you make while debugging are propagated to 
the rest of the code that still needs to be executed. 

The Immediate window lets you try out small snippets of code. This can be useful to try out some 
ideas, without the need to write it in the code window and debug it. In this exercise, you wrote some 
code that created a new calculator instance, called the Multiply method, and outputted the value 
using the question mark. 

VB.NET 

? New CalculatorO .Multiply(4, 12) 
C# 

? new Calculator {) .Multiply (4, 12); 
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Being ableto change the line that is executed next by dragging theyeiiow arrow is very usefui. This 
enabies you to si<ip some code you may not want to run during a debugging session, or to repeat some 
code you want to see execute again (for exampie, after changing a variable's value). 


Besides debugging code at the server, VS comes with excellent support for debugging client-side 
JavaScript as well. 


DEBUGGING CLIENT-SIDE SCRIPT 

So far, you have used the debugging tools to debug ASPX pages and Code Behind. H owever, that's 
not all there is to it. VS also has great support for debugging client-sideJavaScript. Debugging 
client-side JavaScript requires that you use Internet Explorer and won't work correctly with other 
browsers lil<e Firefox or Opera. The cool thing about debugging client-side JavaScript in VS isthat 
you already l<now how to do it. You can use the same familiar tools that you have seen in this chap- 
ter to debug both server-side and client-side code. 

The JavaScript that is eventually used by the page in the web browser can come from a lot of dif- 
ferent sources. You can have JavaScript in external script files, embedded in the page, in a master 
page, and even server controls can emit their own JavaScript. This mal<es it difficult sometimes to 
breal< in the right code, because you don't always know where it comes from. Fortunately, VS has a 
great solution for this; it lets you set breakpoints in the final HTM L being displayed in the browser. 
To show you in what file you're adding breakpoints or what code you are debugging, VS updates 
the Solution Explorer and displays a list of all files containing client-side script that you can step 
through as soon as you are in debug mode. Breakpoints you set in these files during debugging are 
preserved when possible, making debugging a smooth experience. 

The easiest way to learn the new client-side JavaScript debugging possibilities is by trying them out, 
so the next exercise dives right in and shows you how to debug the web service test page that you 
created in Chapter 10. 


TRY IT OUT 


Debugging JavaScript in Internet Explorer 


You need to use M icrosoft Internet Explorer to carry out the following exercise because most of the fea- 
tures shown in this Try It 0 ut work only with that browser. If Internet Explorer is currently not your 
default browser in VS, you can choose your browser from the drop-down list next to the green Start 
Debugging arrow on the Standard toolbar. 

1. If you're still in debug mode from the previous exercise, press Shift-ff 5 to stop debugging. 
Then open theNameservice.es or Nameservice . vb fllefrom theApp_code folder. Locatethe 
Heiioworid web method and set a breakpoint on the first and only line of code in the method that 
returns the personalized greeting. Close the file. 

2. Open WebServices.aspx from the Demos folder in M arkup View. Locate the helloWorld 

JavaScript method, click the line that declares the yourName variable, and press F9 to set a break- 
point, visible in Figure 18-20. 
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E 
E 

<5cript type="text/javascript"> 
function helloWorld() 

{ 


var yourName = document . getEleinentById( "YourNarae '). value 


NameService .HelloWorld(yourNamej hellol-torldCallback) j 

} 


FIGURE 18-20 


3. Press F5 to start debugging. The page loads in tlie browser and you get a text box and two buttons. 
Enter your name in tlietext box and clicl< tlie Say H ello button. As soon as you clicl< it, focus is put 
bacl< on Visual Studio, and the code halts in theJavaScript code block. 


COMMON MISTAKES If your client-side JavaScript breakpoint doesn't get iiit, 
close your browser to stop debugging, type ttie word debugger before the line 
you set the breakpoint on, and press F5 again. VS does not always correctly 
debug your client-side JavaScript breakpoints, but it works fine when using the 
debugger keyword: 

debugger 

var yourName = document . getElementByld (' YourName ') .value , • 
NameService .HelloWorld (yourName, helloWorldCallback) ; 


4. Press FIO to execute the highlighted line (you need to press it 
twice if you're using the debugger l<eyword). The value in the 
text box is now assigned to the yourName variable. When you 
hover your mouse over that variable, a data tip appears. 

5. 0 pen the other debugging windows and notice how they 
all behave identically to what you saw before. You can add 
JavaScript variables to the Watch window to look at their values, 
enter JavaScript in the Immediate window for evaluation, and so 
on. Also note that the Solution Explorer has changed, showing the 
active client-side files containing script right above the web project 
(see Figure 18-21). 

6. To look inside these documents, you can double-click them under 
theWindows Internet Explorer nodethat has appeared in the 
Solution Explorer. The file webservices.aspx should already 
be open in the Document Window. At first, the file may look like 
before. But if you look closely, you can see that this is no longer the original source file with ASP. 
N ET controls mixed up with other markup, but the final HTML rendered in the browser. 

To warn you that you are looking at the final file, and not the original source, VS has added the 
text [dynamic] and a lock icon to the tab for thefileabove the Document Window, shown in 
Figure 18-22. 
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Search Solution Explorer {Ctrt+;) 



1^ Solution 'Site' (1 project) 



^ ^ Script Documents 


J iSp Windows Internet Explorer 



^ @ WebServices.aspx 



£r modernizr-2.6.2.js 
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FIGURE 18-21 
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WebServices.aspx 

WebServices.aspx [dynamic] 0 * X 



E 
E 

E 

<!DOCTYPE html> 
Khtml xmlns='*http://www.w3 .org/1999/xhtml''> 
]<head><title> 

Ueb Services Deno 

</title> 

<script src="/Scripts/niodernizr-2.6.2. js"></script> 
]<link href =". ./App_Theiies/Monochroflie/Honochro(Be. ess" type="text/css" rels'stylesheet"* /> 

_i_ 


FIGURE 18-22 


W hat's really nice about this is that even though you are looking at a runtime file, VS is still able 
to relate this runtime file with theoriginal source. This meansyou can set breal<points in the 
runtime file, and they'll be remembered in theoriginal source so they are available for the next 
debugging session. 

7. To see how this works, set a breakpoint on the line with the aiert statement in theheiioworid- 
caiiback handler. Once the code returns from the web service that is being called in this exercise, 
you'll return to this handler again, so you can investigate the value returned by the service. 

8. Press F5 to continue executing code. The name you entered in the text box is retrieved and then 
sent into theneiioworid method of the service. Because you added a breakpoint there in step 1, 
the code should stop again, enabling you to look at the variable name passed to the web method. 
Although this exercise itself is pretty simple, a lot of magic just happened under the hood. You 
stepped from some client-side code running in the browser into code running in a web service at 
the server, all from the same IDE. 

9. Press F5 again and you are taken back from the server-side web service into the client-side code 
where you can seethe result of the web service in theheiioworidcaiiback handler. 

10. Press F5 once more. The code completes and shows a JavaScript alert window with a greeting con- 
taining your name, just as it did in Chapter 10. 

11. Close your browser, go back to VS again, and open the WebServices.aspx file by double-clicking 
it in the Solution Explorer. This opens theoriginal source file, and not the dynamic version you 

saw in step 6 of this exercise. Locate the helloWorldCallback handler in the WebServices.aspx 

file. N otethat the breakpoint you set in step 7 has been persisted. 
How It Works 

You have a few interesting points to take away from this exercise. First of all, you should understand 
the notion of dynamic files, or runtimefiles. These files are the final result from your ASPX pages and 
give you insight in the final H TM L, CSS, and JavaScript that ends up in the browser. This is a great 
help, because it gives you a total view of all relevant content. Remember, the final markup displayed in 
the browser comes from a variety of resources, including master pages, content pages, external CSS and 
JavaScript files, and from the various server controls that live in your page. The ability to look at the 
combined result from a single location makes it easy to see how everything fits together. 

Another important point to remember from this exercise is how the IDE offers you fully integrated 
debugging features, from the client-side code in the user interface, all the way up into the server. To 
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make it easy to set breakpoints, VS doesn't restrict you to adding tliem in pages at design time only; 
instead, itaiso enabiesyou to settliem in tlie dynamic runtime fiies. Wlien you stop debugging, VS 
tracks tlie new breakpoints for you, finds out to wliat source fiietliey beiong, and addstliem tliere again 
for you, so tliey are avaiiabiefor tlie next debugging session. 

Aitliougli you may not reaiizeit because everytliing is taking piaceon tlie same computer and in tlie 
same IDE, you are crossing many boundaries when debugging like this. First, VS enables you to debug 
client-side script in the browser, so you can hook into that even before any data is sent to the server. 
W hen you press F5 in step 8, the code continues and sends the value to the server where it was used in 
the Heiioworid method of the Nameservice class. 0 nce that server-side web method is done, execu- 
tion returns to the client again, enabling you to break on the aiert statement that shows the message 
from the web service. 

For some reason, debugging client-sideJavaScript in VS 2012 doesn't always work. If you're encounter- 
ing issues, remember the debugger keyword. Just add it before the line you want to break on and VS 
will halt execution when it encounters this keyword. Don't forget to remove the debugger keyword 
again if you're done with debugging; otherwise, your browser will try to start a script debugger when it 
encounters this keyword, which is meaningless to most of your users. 


So far you've been looking at debugging code. H owever, VS now has great support to diagnose the 
H TM L of your page as well. You see how this works next. 


DEBUGGING WITH THE PAGE INSPECTOR 

if you want to build a site that is easy to maintain, you probably make use of many of the features 
that ASP. N ET and the browser offers. For example, you're probably using a master page for the 
general layout, you store page-specific content in a content page that uses that master page, you may 
have one or more user controls for content you reuse across your site (such as the Contact Form in 
the Planet Wrox website), and you may be using themes and skins to separate the design from the 
rest of your application. 

In the browser, all of this code comes together as a single H TM L source document that in turn 
includes references to external resources such asJavaScript and CSS files and images. Because it'sa 
single file, it can be hard to debug that code and understand where a certain piece of HTML came 
from. In addition, because multiple CSS selectors can influence the layout of your page, it may be 
hard to track down the file in which a certain piece of CSS is defined. Using the Page Inspector, new 
to VS 2012, this now becomes much easier. 

Introducing the Page Inspector 

The Page Inspector is a diagnostics tool that runs inside Visual Studio and that brings a unified 
experience between your browser, the ASP. N ET run time, and your source files. The Page Inspector 
comes with Visual Studio so you don't need to do anything to make use of it. 

Although an upcoming exercise shows you many of the features that the Page Inspector offers, here's 
a quick description of how you can use it: 
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You start the Page Inspector by choosing it as your target browser in the Debug Target drop- 
down on the Standard tooibar. Y ou then start your site as you normaiiy wouid using F5 or 
Ctri4f 5. 

>- The Page Inspector presents itseif as a browser window in the IDE (so you can see what the 
page iooi<s iii<e), aiong with a number of toois windows to diagnose your code. 

>- Once ioaded, you can use the Page Inspector's Inspect button to iooi< at the various eiements 
avaiiabiein your page such as navigation elements, buttons, images, and more. 

> While hovering over the elements in the Page Inspector, the code editor window is updated 
with a preview of the documents that contributed the HTML you're inspecting. As men- 
tioned in the introduction of this section, this could be a master page, a content page, a user 
control, and so on. 

>" You can mal<e changes to these documents in VS and then you can refresh the Page Inspector 
to see them show up in the final page. 

>" The Page Inspector also helps you find the CSS rules in your CSS files, whether they are 
defined in a theme's folder or in a custom folder. 

If you've ever used Firebug (for Firefox) or the IE or Chrome Developer tools, some of this may 
sound familiar. These tools also enableyou to inspect HTM L elementsin your page and look at the 
associated CSS. W hat mal<es the Page Inspector different and very special is that it is able to relate 
the final HTML back to the original ASP.N ET source files. This in turn enables editing of the file in 
the IDE, making changes and previewing the results a breeze. 

You get a good look at the Page Inspector and its feature set in the exercise in the next section. 

Using the Page Inspector 

Getting started with the Page Inspector is pretty simple. Because it ships with VS, it's ready for 
use. H owever, it has a few prerequisites. First of all, you need to have Internet Explorer 9 or later 
installed on your machine. Secondly, your site needs to run against .N ET 4 or later. Because the 
Planet Wrox sample site runs against .N ET 4.5, this is not a problem. Thirdly, the Page Inspector 
needsto be installed and registered correctly on your machine. Because this is doneduring instal- 
lation of VS, this is not a problem either. The final prerequisite is that your site needsto be run in 
debug mode, or you need to add a special key to your web.config to enable the Page Inspector. You 
enabled debugging for the Planet Wrox siteearlier in this chapter, which meansyou don't have to 
do anything else for the Page Inspector to work correctly. For cases where you don't have debugging 
enabled and still want to use the Page Inspector, either enable debugging or add the following key to 
your Web.config in the appsettings element: 

<appSettings> 

odd key="PageInspector : ServerCodeMappingSupport" value=" Enabled" /> 

</appSettings> 

If debugging is not enabled or this key is not present, VS gives you a warning when you invoke the 
Page Inspector and offers to fix the problem automatically for you by turning on debugging. 

You see how to use the Page Inspector in the following exercise. 
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TRY IT OUT 


Using the Page Inspector to Diagnose your Site 


In this exercise, you load a few pages into the Page Inspector and 
diagnose the underlying HTM L. You see how to usethelnspect 
feature to find the originating source files and how to make 
changes to the code and refresh the Page Inspector. This should 
prepare you for cases where you need to hunt for a bug in your 
site. 


1. 


2. 


If you're still in debug mode from the previous exercise, press 
Shift 4f 5 to stop debugging. Then close all open files and 
choose Page Inspector from theTarget Browser drop-down 
on the Standard toolbar, shown in Figure 18-23. 



Q^^^Q^QIQ 9^ Debug 



Internet Explorer 



Firefox 

Internet Explorer 
Opera Internet Browser 


Page Inspector k 



Safari 



Browse With... 



FIGURE 18-23 


Press F5 or clicl< the green arrow next to theTarget Browser drop-down, shown in Figure 18-23. 
If you enabled debugging earlier, the Page Inspector should start without further messages. If you 
haven't enabled debugging earlier, follow the on-screen instructions to properly configure your site. 
After a few seconds, the Page Inspector is loaded in the Document Window in VS, as shown in 
Figure 18-24. 
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FIGURE 18-24 
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At the top left of the Page Inspector, you see two buttons labeled 0 Problems and Browser. The 
Browser view is currently active and shows the site as it would appear in your browser. The 
Problems button lets you diagnose any problemswith the setup of the Page Inspector. If you 
have covered all prerequisites, the problem count should be zero and you can ignore this button. 
Otherwise, clicl<ing the button shows you a list of problems and hints on fixing them. 

The bottom of the screen is divided in two. The left half shows you the H TM L for the page 
(indicated by the active HTML tab). The Inspect button enables you to point at elements in your 
page, as you see in a moment. The Files tab shows all server-side files that were used to render 
this page. For the homepage of the Planet Wrox site, these are Frontend. master (the master 
page). Default .aspx (the homepage), and Banner. ascx (the Banner user control in the sidebar 
<aside>). Clicl<ing any of these files opens them in the code editor side by side with the Page 
Inspector. 

Clicl< the Inspect button and then hover your mouse over elements in the page. When you do that, 
the code file that generated the element is shown side by side with the Page Inspector. For example, 
when you hover over the logo, the Frontend. master file appears. If you hover over the banner 
image, the Banner .ascx file is loaded, as shown in Figure 18-25. 
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N ot only is the correct file opened, but the active control is selected for you (the highlighted image 
control in Figure 18-25) aswell. In addition, in the client-side H TM L at the bottom left, theimg 
element is highlighted. This mal<es it super easy to see how it all fits together: the <img> in the 
browser came from an image control in Banner .ascx. If you didn't l<now the source code of this 
site that well, finding this out without the Page Inspector would have been much more difficult. 
You had to diagnose the underlying HTM L, find the <img> element, lool< for the control's id 
attribute, and then search the entire site in VS for the text Imagel. 

4. Clicl< once on the <hi> element (with the text that welcomes the user). VS opens up Default 
.aspx in Preview mode (indicated by the tab with the page name at the right of the code editor) 
and correctly highlights the text. M al<e a change to the header text (for example, change "welcome 
to Planet Wrox" to "welcome to the Planet Wrox website"). N ote that as soon as you start typing, 
the tab of the page in the code editor moves to the left side, tal<ing the page out of Preview mode 
and into Edit mode. In addition, the Page Inspector now indicates that the source of the page has 
changed and that it needs to be reloaded to reflect those changes. This is indicated by a yellow bar 
above the page, shown in Figure 18-26. 


Welcome to Planet Wrox - Page Inspector :;-:-:v:-;ol-lvv.:.v-:v;w^^^^^^ ■» X 

O 0 Problems | ^ Browser] O W http;//localhost:49185/ 

O Some files that are used by this page have unsaved changes. Click here to save all files and refresh the browser. (Ctrl+Alt-t-Enter) 
Home 


Hi there visitor and welcome to Planet Wrox 


FIGURE 18-26 


Clicl< that bar, or press Ctrl -tAlt-fCnter. The page reloads and now shows the change you made to 
the page. 

5. Lool< at the HTM L for the page in the lower-left corner of the Page Inspector, and make a change. 
For example, change the page's title in the <head> section (you need to double-clicl< the text in 
order to edit it) or change the text above the theme drop-down list. Changes you mal<e here are not 
persisted in your source files, and only show up in the Page Inspector until you reload it. 

6. Switch to the other theme using the drop-down list in the Sidebar. N otice how this "just worl<s"; 
because the page runs in Internet Explorer, all client-side functionality, such as JavaScript and form 
posts, l<eep working as if the page was running in a normal browser. 

7. Choose A II Reviews from theTreeview or Menu and then click the link for one of the reviews to go 
to the details page. 

8. Use the Inspect button and highlight the summary of the review. You may recall from an earlier 
exercise that you gave the summary label a CSS class called summary, which you added to the 
theme's style sheet. The Page Inspector noticed that too, and, as illustrated in Figure 18-27, shows 
you the correct filename in the Styles tab below the Page Inspector. You need to scroll down in 
order to see the summary class. 
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Trace Styles Layout Attributes 
^ * { DarkGrey.css 
0font-f amily : Verdana, Arial, Sans -Serif; 

} 

A .Sumnary { DarkGrey.css 
0display: block; 
0font-style: italic; 

} 


FIGURE 18-27 


Click the .Summary selector (not the filename to the right) to open theCSSfilethat defines the 
.Summary sdector. Its code gets highlighted automatically. M al<ea change to the .summary selec- 
tor, for example by adding a thin grey border to its bottom: 

. Summary 

{ 

font-style: italic; 
display: block; 

border-bottom: Ipx solid Grey; 

} 

Just as with the change to the H TM L you made, the Page Inspector sees the changes and enables 
you to refresh the page to see the changes. Clicl< the yellow bar or press Ctrl-f-Alt-ffnter to reload 
the updated stylesheet. 

9. Clicl< the Inspect button and highlight the summary in the text again. Switch to the Trace Styles 
tab, shown in Figure 18-28. Expand a few items such as font-size and font-styie. 
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FIGURE 18-28 


This screen shows you all the CSS rules that are currently in effect for the selected element. This 
mal<es it easy to seethe CSS by which the element is styled and where that CSS came from. You 
can't make changes from this screen to your source files. You can, however, disable some of the 
rules to see how that affects the page. The changes you make are not persisted and only show up 
in the Page Inspector until you reload it or browse to another page. 
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The other two tabs (Layout and Attributes) show you the box model for the selected element and 
enable you to add additional attributes (a class attribute, for example) to the selected element. 

10. To stop using the Page Inspector, clicl< the Stop button on the toolbar. You can also press Shift 4f 5 
if the Page Inspector iscurrently not the active window in thelDE. 

How It Works 

W hen you enable the Page Inspector, the .N ET run time and the IDE l<eep track of which file or control 
contributes which HTM L to the final page. It then uses that information to find the responsible file 
and highlight the relevant codein it when you inspect page elements in the Page Inspector. Changes 
you mal<eto the source files are detected by the IDE so you can refresh the Page Inspector whenever it's 
needed. 


Useful as debugging your code may be during the development of your site, it lacks the capability to 
investigate the behavior of your site while it's running in production. Fortunately, ASP.N ET has a 
solution for that as well: tracing. 


TRACING YOUR ASP.NET WEB PAGES 

Without tracing, finding out the values of variables, objects, the execution path your codefollows, 
and so on at run time is problematic at best. You would probably add a Label control to the page, 
and then write information to it likethis: 

VB.NET 

Dim value2 As Double = Convert . ToDouble (ValueBox2 . Text ) 

DebugLabel .Text &= "The value of value2 = " & value2 . ToString ( ) & "<br />" 
C# 

double value2 = Convert . ToDouble (ValueBox2 . Text ) ; 

DebugLabel .Text += "The value of value2 = " + value2 . ToString ( ) + "<br />"; 

Although this certainly works, it's quite cumbersome. First, you need to write a lot of code to make 
this work. Secondly, you end up with an ugly Label control in your page that you shouldn't forget 
to remove when you're done with your debugging or tracing. And finally, when you're ready, you 
should remove all the code that sets the oebugLabei label. You could take the easy way out by set- 
ting the Label control's Visible property to False, but you would still take the performance hit of 
assigning the text to the Label control. 

Tracing in ASP.N ET solves all of these problems. It lets your pages, controls, and code write infor- 
mation to a central location, called thetrace, which can then be shown in the browser. Tracing 
is built into the ASP.N ET Framework, which means you can use it without any manual coding. 
Additionally, you can add your own information to thetrace. In thefollowing section, you see how 
to use the built-in tracing capabilities, giving you a wealth of information about your page. In a later 
exercise, you see how to add your own information to thetrace. 
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Using the Standard Tracing Capabilities 

Without much work, you can get a lot of good information about the way your pages execute. All 
you need to do is enable tracing for your pages. You can do this at the page level or at the site level. 
With tracing enabled at the page level, you can choose one or more specific pages you want to trace. 
Application-level tracing is useful if you want to look at multiple pages at the same time. This may 
help you, for example, to find slow pages in your website. 

Tracing with Individual Pages 

To enable tracing in a page, you need to set its Trace attribute in the page directive to true: 

<%@ Page Trace="true" %> 

W hen you run a trace-enabled page, you get a long list of details at the bottom of the page. Figure 
18-29 shows theASP.N ET trace for the Calculator demo page you have been working with in this 
chapter. 
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{Session Id: k40s2bryv5lzbflz2mu2kspt 
p"ime of Request: 8/25/2012 8:37:39 AM 
Request Encoding: Unicode (UTF-8) 

Request Type: 
Status Code: 
Response Encoding 

GET 
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Trace Information 


Category Message 

aspx page Begin Prelnit 

From First{s) 

From Last(s) 


aspx.page End Prelnit 

0 000122 

0 000122 


aspx.page Begin Init 

0 000175 

0 000053 


1 aspx page End Init 

0 000213 

0 000038 



FIGURE 18-29 


The trace provides a lot of details about your current page. At the top, you find a summary of the 
request details, including the current date and time, the method used to retrieve this page (GET or 
POST), and the status code (status 200 in Figure 18-29, to indicate success). 

Below that, you see the Trace Information section. TheASP.N ET page class writes to the trace 
when you enable it. This is similar to the demo page you wrote in Chapter 15 that wrote to a Label 
control from the numerous events triggered during the page's life cycle. For each trace line you see a 
message, a category it's placed in, and two times. The first time column records the elapsed time in 
seconds si nee the first trace message was processed. T he fi rst trace message appears at the top of the 
list. The second time column records the elapsed time in seconds between processing of the current 
trace message and the preceding trace message. 
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By default, the data is sorted by time, putting tlie events in tlie order in wliicli tliey occurred. 
You can aiso sort tliem on tlie category (more on categories in tlie section tliat deais witli 
adding your own information to tlie trace) by clianging tlie TraceMode from sortByTime to 

SortByCategory! 

<%(s Page Trace="true" TraceMode="SortByCategory" %> 

A iittiefurtlier down tlie page (not visibie in Figure 18-29), you see tlie control tree, which presents a 
hierarchical view of the controls in your page and their size. 

Below the control tree, you seethe details for a number of important collections, including the 
Q uery String, Cookies, Form, H eaders, and Server Variables. Additionally, you see information you 
may have stored in Session or Application state. Being ableto see these collections can be a great aid 
in figuring out a problem. For example, if you have a page that is supposed to read from a cool<ie, 
but that crashes and raises an exception as soon as the page loads, you can lool< at the Cookies col- 
lection and see if the page receives the data you expect. These collections are invaluable tools in 
understanding the execution of your page and can really aid in finding and fixing bugs in your code. 
In order for tracing to work when dealing with exceptions, you need to turn custom error pages off 
in theweb.config file. Refer to the section "Global Error H andling and Custom Error Pages" to 
learn more about custom error pages. 

Page-level tracing means you need to enable tracing on every page you want to trace. It also means 
that you need to disable it on every page after you're done. Because this can be cumbersome in a 
large site, ASP.N ET also enables you to trace the entire application. 

Tracing the Entire Website 

You can enable tracing for the entire website by changing trace settings in theweb.config file. You 
do this by creating a <trace /> element under <system.web>. The following table lists the most 
important attributes that the <trace /> element takes. 


ATTRIBUTE ^^^^ 

DESCRIPTION ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^H 

enabled 

Determines whether or not tracing is enabled for the application. By default, 
tracing is disabled, so you need to set this attribute to true explicitly. 

traceMode 

Determines the order in which items are sorted in the trace output. It works 
identically to the TraceMode attribute of the Page directive. 

requestLimit 

Determines the number of trace requests that ASP.NET keeps available. 
When the limit is hit, older trace records will be deleted automatically, leaving 
only recent trace requests available. 

pageOutput 

Specifies whether the trace information is displayed on the page. When set 
to false (the default), you can only access the tracing information using 
Trace . axd, which is discussed later. 
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ATTRIBUTE 


DESCRIPTION 


localOnly 


Specifies whetlier tlie special Trace . axd handler is accessible from the local 
host only. From a security point of view, you're best off to leave this set to 
true, which means the trace is not available to outside users. 


mostRecent 


Determines whether old trace records are discarded when the number of 
trace requests hits the requestLimit. When set to false, tracing is dis- 
abled automatically when the requestLimit is hit. 


When you have enabled tracing, you have two ways to read the trace information. When you have 
set pageoutput to true, the trace i hformation is appended to eacli page, similar to what you saw 
with page-level tracing. 

H owever, to make tracing less obtrusive, you can disable pageoutput and then request tracing 
information using a special file called Trace, axd. This is a virtual file, which means you won't find 
it in your website when you go looking for it. H owever, the ASP. N ET run time knows it should pro- 
videyou with tracing information when you request this special page. Although thefileisvirtual, 
you can still protect it using ASP.N ET's URL security by adding a <iocation /> element to the 
main web.config file as you've done with other file and folders. 

You see how to enabletracing for the site in thefollowing exercise. 


In this Try It 0 ut, you see how to enable site-wide tracing. First, you make a few changes to theweb 
.conf ig file. You then browse your site, filling the trace log with your page requests. Finally, you 
request the special Trace, axd page to seethe available trace log information. 

1. Open Web.config and locate the opening <system.web> tag. Asa direct child of that element, add 
the following configuration information to enable tracing: 

<system.web> 

<trace mostRecent="true" enabled="true" requestLimit="100" pageOutput=" false" 
localOnly="true" /> 

This enables the trace, but doesn't add its output to the page. Instead, you need to request the 
special Trace. axd page to seethetraceinformation. Additionally, you makeyour system a little 
more secure by only allowing requests for the trace information from the local machine. Save and 

close Web . conf ig. 

2. Open theTarget Browser drop-down on the Standard toolbar and switch back from the Page 
Inspector to your preferred browser. Then right-click Default. aspx in the Solution Explorer and 
choose View in Browser. 

3. Click around the site, opening pages, changing the theme, filling in the contact form, and so on. 



Enabling Tracing for the Entire Site 
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4. After you have requested at least five pages, change the address bar of your browser as follows so It 
requests the special Trace . axd page: 

http : //localhost : 4 93 94 /Trace . axd 

Your port number may be different, but It's Important that you request the page Trace, axd on 
localhost. You should get a page similar to Figure 18-30. If the page Is empty, press Ctrl4f 5 to 
refresh It. 


e] I 'H- Google P\ ft D ^ 

A 

Application Trace 


[ clear current trace ] 

Physical Directory: C:\BegASPNET\Site\ 


Requests to this Application 



Remaining: 86 

No. Time of Reauest 

File 

Status Code Verb 


1 8/2S/2012 8 

49:31 AM 

About/ Contact. aspx 

200 

GET 

View Details 

2 8/2S/2012 8 

49:34 AM 

Default. aspx 

200 

GET 

View Details 

3 8/25/2012 8 

49:36 AM 

Reviews/Default, aspx 

200 

GET 

View Details 

4 8/25/2012 8 

49:37 AM 

Reviews/ All. aspx 

200 

GET 

View Details 

5 8/2S/2012 8 

49:39 AM 

PhotoAlbums/ 

200 

GET 

View Details 

6 8/25/2012 8 

49:39 AM 

PhotoAlbums/ 

200 

GET 

View Details 


FIGURE 18-30 

5. The list of traces Is sorted based on time, from oldest to newest. Click the View Details link you see 
In Figure 18-30 for an ASPX page. Y ou get a page similar to the one shown In Figure 18-29. 

6. Disable tracing by setting the enabled attribute to false In the web.conf ig file, and then try 
requesting Trace, axd again. NotlcethatASP.NET doesn't serve the page, but shows your error 
page Instead. 

How It Works 

The ability to see trace Information for pages that have been requested Is extremely valuable. Thelnfor- 
matlon can help you understand the flow of Information from and to a web page. For example, the 
trace Information for the contact .aspx page also shows the Information that users have entered In the 
text box controls on the page. To see what this Information looks like, click the View Details link for 
an Item you want to zoom In on. 


Lj http;//locslhost49185/Trace.axd | + )| 

^ X, localhost:49185.;Trace.axd 


Although the Information thatASP.N ET traces for you automatically Isextremely useful, you're not 
limited to just this Information. You can also add your own Information to the trace log. 
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Adding Your Own Information to tlie Trace 

Adding your own data to the trace is usefui if, for example, you want to see tlie vaiue of a variable, 
or want to find out if a specific event fires, and wlien it fires exactly. 

You can add information to the trace by using the Trace class. This class exposes two useful meth- 
ods: Write and Warn. Both do pretty much the samething: they add information to the trace that 
you can optionally put in a category you mal<e up yourself. The only difference between write and 
Warn is that messages written by warn appear in red. You could use the warn method for unexpected 
situations because the message will draw more attention. 

In the following exercise, you see how simple it is to add your own information to the trace using 
the Warn and write methods. 


||j|ym2^Q Adding Trace Data to Your Pages 

In thisTry ItOut, you add somecustom information to theASP.N ET trace. You use the write method 
to write out trace information in a normal page execution, and use the warn method for unexpected 
scenarios. 

1. Open caicuiatorDemo.aspx, switch to its Code Behind, and locate the click handler for the 
Calculate button. 

2. Right before the select case (VB.N ET) or switch statement (C#), add the following Trace 

.Write call: 
VB.NET 

Trace. Write (String. Format { "Performing the calculation with the {0} operator", 
OperatorList . SelectedValue) ) 

Select Case OperatorList . SelectedValue 

C# 

Trace. Write (string. Format ( "Performing the calculation with the {0} operator", 
OperatorList . SelectedValue) ) ; 

switch (OperatorList . SelectedValue) 

3. N ear the bottom of the event handler, modify the Else statement for the checl< that ensures that 
both TextBox controls contain a value: 


VB.NET 

Else 

Result. Text = String. Empty 
Trace .Warn ( "Custom Category", 

"TextBox controls are empty; time to add Validation controls?") 

End If 
C# 


else 
{ 
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Result. Text = string. Empty ; 
Trace. Warn ( "Custom Category", 

"TextBox controls are empty; time to add Validation controls?"); 

} 

4. Enable tracing for this page expiicitiy. Y ou can do tiiis by setting the Trace attribute of the page 
directive in M arl<up View: 

<%@ Page Title= "Calculator Demo" ... Trace="true" %> 

5. Saveaii your ciianges and request tiie Calculator page in the browser by pressing Ctrl4f 5. Enter 
two numbers and clicl< the Calculate button. N otethat your custom information is added to the 
trace, between the Begin Raise postBackEvent and End Raise postBackEvent trace entries 
even though tracing is disabled at the site level. N ote also that the text is blacl<, and has no cat- 
egory assigned. 

6. Clear the text from both TextBox controls in the browser and clicl< the Calculate button again. 
The trace information should now be easier to spot because of its different color and own category 
name, as shown in Figure 18-31. 
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FIGURE 18-31 


7. Go bacl< to VS once more and disable tracing for the Calculator page by setting the Trace attribute 
of the Page directive to false. Save your changes and request the page again. N otethat the page 
still functions correctly, but no longer outputs the trace information. 

How It Works 

The Write and warn methods of the Trace class enable you to write additional information to the 
trace. The ASP. N ET run time l<eeps track of the information and displays it together with the rest 
of the trace info, either directly at the bottom of the page in the browser with page-level tracing, or 
through the special Trace, axd page you saw earlier. 

The Write and warn methods each have three overloads. The first one (shown only with write in the 
previous example) accepts a single string that is displayed in the M essage column. The second overload 
also accepts a category name as demonstrated with the warn method. The final overload, not shown in 
theTry It 0 ut exercise, also accepts an Exception object whose message will be added to the trace out- 
put. This is useful to trace the information of an exception in a catch blocl<. 
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Tracing and Performance 

Although it may seem that leaving warn and write statements in your code on your production sys- 
tem may hurt performance, this isn't the case. Because you can disable tracing in theweb.conf ig 
file by setting the enabled property of the trace element to false, you greatly minimize the perfor- 
mance overhead of tracing. 

A Security Warning 

Tracing can be very useful, but leaving trace information in your production environment can lead 
to information disclosure. Therefore, you should always either disabletracing by setting its enabled 
attribute in web.config to false, or at least by setting the locaioniy attribute to true. In Chapter 
19, you learn a tricl< that enables you to mal<e this change for all sites on your production server, 
mal<ing it easy to block access to thetracefunctionality. 


PRACTICAL DEBUGGING TIPS 

The following list provides some practical tips to help you debug your application: 

N ever leave debug=" true" in the web.config file in a production environment. Always set 
it to false to improve performance. In Chapter 19, you see an even better solution to ensure 
this setting is never set to true on a production server. 

>• Try to avoid swallowing exceptions in a catch block. You may be tempted to wrap your 
code in a Try/catch block and then leave the entire catch block empty. Although this cer- 
tainly avoids exceptions showing up in the user interface, it makes debugging extremely 
difficult. Because you are no longer aware a problem occurs, you also cannot write code to 
prevent the error from happening in the first place. The general rule here is: Catch errors that 
you can handle successfully, for example by displaying a message to the user. If you can't 
handle the exception in your code, let it bubble up and log it in the Appiication_Error 
event handler so you know that the exception occurred. 

>■ If you need to re-throw an exception in a catch block, don't use Throw ex (throw ex in 
C#), but use Throw (throw in C#) Only. When you use Throw ex, you make it difficult to 
track the path the code has followed before the exception occurred, but by using Throw you 
maintain this information. H ere's the code showing both options: 

VB.NET 

Try 

Catch ex As Exception 

' Do something with the error here, such as logging it 

Throw ex ' Bad example; you lose track of the source of the exception 
Throw ' Good example; forwards the exception 

' and maintains the call stack 

End Try 
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C# 

try 
{ 

} 

catch (Exception ex) 
{ 

// Do something with the error here, such as logging it 

throw ex; // Bad example; you lose track of the source of the exception 
throw; // Good example; forwards the exception 

// and maintains the call stack 

} 

>■ Try to avoid exception liandling wlien possible. As you saw in tliis cliapter, it's mucli better 
(and faster) to simply avoid an exception in the first place. For example, you can easily avoid 
the DivideByzeroException exception by checl<ing for a value of zero before carrying out 
the division. 

>■ Be as explicit as possible with the Exception types you catch in Try/catch blocks. Try to 
avoid catching generic Exception types and set up multiple, explicit catch blocks for each 
specific type you anticipate. 


SUMMARY 

N 0 matter how carefully you program, your site is likely to contain some bugs or throw exceptions 
at run time. To minimize these exceptions and build a site that runs as smoothly as possible, you can 
do a number of things. 

First of all, you can use exception-handling techniques, where you write code that is able to catch 
exceptions that you foresee and handle them appropriately. 

To help you write code with as few bugs as possible, VS offers you a great set of debugging tools. 
The ability to break into your codeand analyze and change the execution environment from client- 
side code all the way into the server is a great aid in your bug-slashing adventures. 

Even if you have debugged your application thoroughly, there's still a chance your site may have 
issues in production, whether they are related to performance, logic errors, or other unexpected rea- 
sons. In those cases, you can use the ASP. N ET tracing facilities that let you track information about 
running pages. Analyzing this trace information can bring you a long way in fixing the underlying 
issues. 

N ow that your website is complete and hopefully bug-free, the next step is to put it online. You see 
how to deploy your ASP.N ET website in the next chapter. 


Summary | 727 


EXERCISES 


1. What's the difference between debugging and tracing? 

2. Imagine you have some code that could potentially throw an exception. For example, you try to 
send an e-mail message to a mail server. What kind of exception-handling strategy would you use 
to avoid the exception from being displayed in the browser? What code would you need? 

3. You're taking over a website that has been built by another developer who had never heard of 
exception handling. Your client is complaining about the quality of the site and the large number 
of "Yellow Screens of Death" that users see. Besides analyzing the code for the entire application, 
what would be a quick solution to get information about the errors and the locations where they 
occur? And how can you shield the site's users from the dirty details of the exception messages? 

You can find answers to these exercises in Appendix A. 
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► WHAT YOU LEARNED IN THIS CHAPTER 


Breakpoint 

A marker you can set in your code to indicate wliere you want tlie debugger 


to halt at run time 

Data tips 

Tooltips that present simple or rich data about variables during debugging 

Debugging 

The process of finding and fixing bugs in your code 

Exception 

The .NET term for an error that may occur in your code 

Exception liandling 

A methodology to identify and handle errors that occur at run time 

Stacl< trace 

A visual representation of the current stack of code calls 

Trace 

Enables ASP.NET controls and your own custom code to write information to 


a central log location at run time 



Deploying Your Website 


WHAT YOU WILL LEARN IN THIS CHAPTER: 


>• How to ease the deployment process through simple changes to 
your code and configuration 

>• How to prepare your site for deployment by creating a copy using 
Visual Studio's built-in copy tools 

>" How to install and configure a web server and your website on your 
target machine 

>• How to avoid common errors you may get when deploying a site 

>" How to copy data stored in your SQL Server database to the target 
server 

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER 

You can find thewrox.com code downloads for this chapter on theDownload Code tab at 
www.wrox.com/remtitie.cgi?isbn=iii83ii8 0 9. The code is in the Chapter 19 download. 

Congratulations! The fact that you're reading this chapter probably means you now have a 
f u 1 1 -featu red , database-driven ASP.N ET website that is ready for release into the wild. It's an 
exciting time for you and your project. Pretty soon your application will be used and judged 
by your target audience. 

To make your website accessible to users worldwide, you need to publish it to a production 
server that is connected to the Internet. W hat kind of server this is and where it is located 
depends on your own requirements and budget. You can host the site on a home server in your 
attic with a private Internet connection (as I used to do with http: // imar . spaanj aars . com) 
or you can host it with an external (and often commercial) party with a direct connection to 
the Internet backbone. 
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Either way, you need to do some work to get your site from its development location at C:\ 
BegASPNET\site to a location where it's accessible over the Internet. 

This chapter deals with a few topics related to successfully deploying your website. You learn about 
the process from preparing your site in the development environment to actually running and testing 
it at your production server. 

The chapter then ends with a list of things you need to tal<e care of when deploying your site. 
You can use this checl<list to mal<e sure you configure your production site in the most secure and 
optimal way. 


W hen you're working on the first edition of your website in a development environment, manag- 
ing the site and its source code is pretty straightforward. You have only a single version of the site's 
source, making it easy to maintain. H owever, as soon as you put your site in production, you now 
have two versions of it: one running in the production environment and the one you use for develop- 
ment. This makes it difficult to keep things synchronized. For example, you probably use a different 
database and connection string in your production environment. You're also likely to use different 
e-mail addresses for the e-mail that is sent by the site. Finally, you may want to disable sending the 
error e-mails from the Global .asax files in a development environment. If you make all of these 
changes in the code directly when you put your site on a production server, there's a fair chance that 
you'll overwrite some settings during the next update, which can lead to unwanted results. 

This section shows you how to make managing different versions of the same website a little easier. 
You see how to move some of thehardcoded settings, such as e-mail addresses, to theweb.config 
file. The code in your application then reads these values at run time. The only difference between 
your development and production environments is then a single configuration file, making it easy to 
have different settings in both environments. 

Avoiding Hard-Coded Settings 

So far, the pages and user controls you have built use some hard-coded settings for things like e-mail 
addresses. For example, contactForm.ascx, the user control that sends out an e-mail, uses the fol- 
lowing code to set the recipient and sender information: 
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VB.NET 


myMessage . From = New MailAddress ( "youOexample . com" , 
myMessage . To .Add (New MailAddress ( " you@example . com" , 


Planet Wrox") 
Planet Wrox") 


C# 


myMessage . From = New MailAddress ( "you(Sejcample . com 
myMessage . To .Add {New MailAddress ( " youfSexample . com' 


"Planet Wrox" ) ; 
"Planet Wrox" ) ) ; 


H ard-coding settings in this manner makes it difficult to give them different values in different envi- 
ronments. Every time you want to roll out your site to production, you need to make sure you're not 
accidentally overwriting settings you changed for the production environment. 
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Fortunately, ASP.N ET comes with a great solution to avoid these kinds of problems: the web. con- 
fig file, expression syntax, and thewebconfigurationManager class you use to read from web 

. conf ig. 

The Web.config File 

You've used the web.config file a number of times in this bool< to store information about con- 
nection strings, membership, roles and profile information, and more. You also briefly saw the 
<appSettings> element that enables you to storedata in a l<ey/value pair using <add> elements. The 
<appsettings> element enables you to store simple information, such as an e-mail address, and 
retrieve that value by its l<ey. For example, to store an e-mail address, you can add the following to 

the Web . conf ig file: 
<appSettings> 

<add key="FromAddress" value="webmaster@example . com" /> 
</appSettings> 

The <appsettings> element is placed outside the <system.web> element in the web.config file, yet 
still within the parent <configuration> element. 

Obviously, you need a way to access the data in <appsettings> at run time. You can do this in 
a couple of ways, including expression syntax and thewebconfigurationManager class, both of 
which are discussed next. 

Expression Syntax 

Expression syntax enables you to bind control properties to resources, such as those found in the 
<appsettings> element in web.config. Connection strings, localization resourcefiles, and various 
routing settings used in UR L rewrite scenarios. To display data from the <appsettings> element, 
you use the following syntax, where AppsettingKeyName refers to a l<ey you define in web.config: 

<%$ AppSettings -.AppSettingKeyName %> 

For example, to display a copyright notice on your pages in a Literal control, you can add the fol- 
lowing setting to web.config: 

<add key=" Copyright" value=" Copyright by Wrox" /> 

You can then display this text in a Literal control lil<e this: 

<asp:Literal ID="Copyright" runat="server" Text="<%$ AppSettingsiCopyright %>" /> 

To mal<e it even easier to set properties lil<e Text as in the preceding example. Visual Studio comes 
with the Expression Editor. To access this dialog box, select a control in Design or M arl<up View, 
open its Properties Grid, and clicl< the ellipsis for the (Expressions) item, shown in Figure 19-1. You 
may find that the (Expressions) item does not always show up when in M arkup View. If that's the 
case, switch to Split View or Design View first. 

The Expressions dialog for the Literal control opens, enabling you to bind control properties to 
expressions. Visual Studio limits the list of properties of the control to those that can be bound 
using an expression. To bind the Text property of the Literal control to an application setting. 
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first click Text on the ieft side of tliediaiog box, 
ciioose AppSettings from tiie Expression Type drop-down 
iist on tiierigiit, and finaiiy, ciioosetiie desired AppSetting 
from tile drop-down iist in tlie Expression Properties 
section. Figure 19-2 siiows tiie complete Expressions dia- 
log box for a Literal control used to display the 
copyright text. 

When you clicl< OK, Visual Studio modifies the Text 
property of the Literal control so it contai ns a reference 
to the correct application setting. 


Copyright System.Web.UI.WebContrals.Literal 


Visible 
B Dab 


B Mhc 

(ID) 


True 


Copyright 


S 


(Expressions) 

The expressions that are bound to properties of this control. 
FIGURE 19-1 


Copyright Expressions 

Select the property to bind to. You can then bind it by selecting an expression type and setting the properties for 
that expression. 


Bindable properties: 


El ClientlDMode 

B EnableViewState 

S Mode 

0 Text 
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El ViewStateMode 
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Expression type: 


AppSettings 


Expression properties: 



AppSetting 

The nanne of the application setting in web.confrg. 


OK 


Cancel 


FIGURE 19-2 


Getting values from the web.conf ig using expression syntax is useful, but may not cover all your 
needs. Therefore, it's good to know that you can retrieve the values programmatically as well. To do 

this, you can USethe WebConfigurationManager ClaSS. 

The WebConfigurationManager Class 

The WebConfigurationManager ClaSS from the System. Web . Configuration namespace prOVldeS 

access to data that is stored in configuration files. It has special support for the appsettings and 
connect ionSt rings elements of the web.conf ig file, enabling you to retrieve data from those sec- 
tionswith a singlelineof code. The following snippet shows you how to retrieve the FromAddress 
value you saw earlier from the <appsettings> element: 

VB.NET 

Imports System. Web. Configuration 

Dim fromAddress As String = WebConfigurationManager .AppSettings . Get { "FromAddress" ) 
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C# 

using System. Web. Configuration; 

string fromAddress = WebConf igurationManager . AppSettings . Get { "FromAddress" ) ; 

The Get method always returns data as a string, so you'll need to convert it to a proper type if 
you're expecting anything other than a string. For example, if you have stored a boolean value in 

Web.config lil<ethis: 

<add key="SendiyiailOnError" value="true" /> 

you need to use the following code to retrieve and convert the value: 

VB.NET 

Dim sendMail As Boolean = 

Convert .ToBoolean(WebConf igurationManager. AppSettings .Get ("SendMailOnError") ) 

C# 

bool sendMail = 

Convert .ToBoolean(WebConf igurationManager. AppSettings .Get ("SendMailOnError") ) ; 

Although you can access the webconf igurationManager class in the Code Behind of your Web 
Forms and user controls directly (provided you have imported the system. web. configuration 
namespace), I prefer to create static, read-only properties in a custom configuration class that 
accesses the Web.config file to get the values. You see how to do thisin the following exercise. 


TRY IT OUT 


Moving Application Settings to Web.config 


In this Try It 0 ut, you create a class with a few properties that get their values from the web.config 
file. You then use the properties of this class in your code to replace the hard-coded values that were 
used earlier. 

1. lnsidetheApp_code folder, createa new class fileand call it Appconfiguration.vb or 
Appconfiguration.es. In C#, remove the constructor code, shown in the following code block: 

public AppConf iguratlon { ) 
{ 

// 

// TODD: Add constructor logic here 
// 

} 

Because the class is going to have static properties exclusively, you don't need the constructor. 

2. At the top of the class file, add an imports/using statement for the system. web. configuration 

namespace: 

VB.NET 

Imports System. Web . Configuration 
C# 

using System. Web. Configuration; 
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3. Add a new shared (static in C#), read-only property to this class that returns the FromAddress 
from the Web. config file. Recall from Chapter 5 that a shared/static member (lil<ea method or 
a property) operates on the class itself, and not on an instance of that class. 

VB.NET 

Public Class AppConf iguration 

Public Shared Readonly Property FromAddress () As String 
Get 

Dim result As String = 

WebConfigur at ionManager.AppSet tings .Get ( "FromAddress" ) 
If Not String. IsNullOrEmpty (result) Then 
Return result 
End If 

Throw New Exception ( "AppSetting FromAddress not found in web. config file.") 
End Get 
End Property 

End Class 

C# 

public class AppConf iguration 
{ 

public static string FromAddress 
{ 

get 
{ 

string result = WebConf igurationManager.AppSettings. Get ("FromAddress") ; 

if ( ! string. IsNullOrEmpty (result) ) 

{ 

return result; 

} 

throw new Exception ( "AppSetting FromAddress not found in web. config file."); 

} 

} 

} 

4. Repeat the previous step, but this time create the following three properties by creating a copy of 

FromAddress: 
^ FromName 
^ ToAddress 
^ ToName 

Don't forget to rename all three occurrences of FromAddress to the new property name. 

5. Still insidethe AppConf iguration class, create a boolean property called sendMaiionError: 


VB.NET 

Public Shared Readonly Property SendMailOnError () As Boolean 
Get 

Dim result As String = 

WebConf igurationManager .AppSettings . Get ( "SendMailOnError" ) 
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If Not String. IsNullOrEmpty{result) Then 

Return Convert . ToBoolean (result) 
End If 

Throw New Exception { 

"AppSetting SendMailOnError not found in web.config file.") 

End Get 
End Property 

C# 

public static bool SendMailOnError 
{ 

get 
{ 

string result = WebConf igurationManager .AppSettings . Get ( "SendMailOnError ") ; 

if ( ! string. IsNullOrEmpty (result) ) 

{ 

return Convert . ToBoolean (result) ; 

} 

throw new Exception { 

"AppSetting SendMailOnError not found in web.config file."); 

} 

} 

6. W hen you're ready with the five properties, save and close the Appconf iguration file. 

7. Open the Code Behind of contactporm.ascx in the Contro Is folder, locate the code that sets 
the From and To addresses, and replace the hard-coded values with their Appconf iguration 
counterparts: 

VB.NET 

myMessage . From = New MailAddress (AppConf iguration. FromAddress , 

AppConf iguration. FromName) 
myMessage .To .Add (New MailAddress (AppConf iguration. ToAddress, 

AppConf iguration. ToName) ) 

C# 

myMessage . From = new MailAddress (AppConf iguration. FromAddress , 

AppConf iguration. FromName) ; 
myMessage .To .Add (new MailAddress (AppConf iguration. ToAddress, 

AppConf iguration. ToName) ) ; 

N otice how IntelliSense helps you pick the correct property of your Appconf iguration class. 

8. This is also a good moment to delete the line of code that calls the sieep method (near the end 
of the sendButton_ciick method) that you added there in Chapter 10 to simulate a slow mail 
server. On your production site, you want this to go as fast as possible. 

9. Save your changes and close the file. 

10. 0 pen the Global . asax file and wrap the entire code in Appiication_Error in an if check 
that ensures that sendMaiionError is set to True. Additionally, change the hard-coded e-mail 
addresses to use the FromAddress and ToAddress from the AppConf iguration class instead: 
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VB.NET 

Sub Application_Error {ByVal sender As Object, ByVal e As EventArgs) 
If AppConfiguration.SendMailOnError Then 

If HttpContext . Current . Server . GetLastError { ) IsNot Nothing Then 

Dim myMessage As MailMessage = New MailMessage (AppConf iguration. FromAddress, 
AppConf iguration.ToAddress, mailSubject, message) 

End If 
End If 

End Sub 

C# 

void Application_Error (obj ect sender, EventArgs e) 
{ 

if (AppConf iguration. SendMailOnError) 
{ 

if (HttpContext . Current . Server . GetLastError ( ) != null) 
{ 

MailMessage myMessage = new MailMessage (AppConf iguration. FromAddress, 
AppConf iguration.ToAddress, mailSubject, message) ; 

} 

} 

} 

11. Open web.config and add the following elements to the <appsettings> element. Change the 
e-mail addresses for FromAddress and ToAddress to your own: 

<conf iguration> 
<appSettings> 

<add key=" FromAddress" value= "planetwrox@example.com" /> 

<add key="FromName" value="Planet Wrox" /> 

<add key=" ToAddress" value="planetwrox@example . com" /> 

<add key="ToName" value="Planet Wrox" /> 

<add key=" SendMailOnError" value="true" /> 

12. Save all your changes and press Ctrl 4f 5 to open the homepage in your browser. Go to the Contact 
page and fill in the contact form. Y ou should receive an e-mail at the address you specified in the 
previous step. 

13. Request a nonexistent page in your browser. For example, change the page name in the address in 
the browser's address bar to oefauitTest .aspx. You should receive a "File N ot Found" message 
and an e-mail with the exception details, just as in the preceding chapter. 

14. Go bacl< to Visual Studio, open web.config, and change the setting for sendMaiionError from 

true to false! 


<add key="SendMailOnError" value="f alse" /> 
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15. Save your changes, and again request a page that doesn't exist. Because you changed the 
sendMaiionError Setting, you Shouldn't get an e-mail with the exception details. 

How It Works 

The properties of theAppconfiguration class lool< in theweb.config file for the requested application 
settings. W hen the setting is not defined or does not contain a value, each property throws an excep- 
tion. This is useful to detect missing application settings at an early stage. Instead of silently returning 
an empty value, you now get an exception that reminds you to add the required application setting. 

At run time, the code accesses these properties 11 l<e this: 

VB.NET 

myMessage . From = New MailAddress (AppConf iguration. FromAddress , 

AppConf iguration. FromName) 

C# 

myMessage . From = new MailAddress (AppConf iguration . FromAddress , 

AppConf iguration . FromName) ; 

Because the properties have been defined as shared (static in C#), you can access them directly on the 
AppConf iguration class, without the need to create a new instance of Appconf iguration first. 

Although you could access the <appsettings> element in web.config directly in the code (for exam- 
ple, you could use WebConfigurationManager.AppSettings .Get (" FromAddress" ) tO get the e-mail 

address in contactporm.ascx directly), it's better to wrap the <appsettings> elements in shared prop- 
erties in their own class. This solution gives you IntelliSenseon theAppconfiguration class, making 
it easy to see what configuration properties are available. It also enables you to write centralized code 
that throws exceptions when the required application settings cannot be found or that supplies sensible 
defaults. N otice how the properties throw an exception only when a valid value cannot be returned. If 
you access Web.config directly in your own code, you would need to check for valid values every time 
you access a setting. 

The same principle is used for the sendMaiionError setting. W hen an exception occurs at run time, 
the code in Appiication_Error now consults the SendMaiionError property. This property in turn 
checks the <appsettings> element of web.config to determine if an error message should be e-mailed. 
Because the sendMaiionError property is a boolean, the code uses convert .ToBooiean to convert the 
string returned from theweb.config file into a boolean. 

By storing values in web.config instead of hard-coding them, your site becomes easier to maintain 
and deploy. When you go live, all you need to do is create a copy of web.config for your production 
environment and change a few settings. This enables you to turn off error logging by e-mail on your 
development machine easily. 


With the hard-coded application settings moved to the central web.config file, the next step in the 
deployment process is optimizing your external CSS and JavaScript references. 
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INTRODUCING BUNDLING AND MINIFICATION 

Bundling and minification are two new features that have been added to ASP.N ET 4.5. Both are 
designed to improve the performance of your site by minimizing the number and size of your cli- 
ent CSS and JavaScript files. With bundling, theASP.N ET run time combines one or moreCSSor 
JavaScript files into a single request. This minimizes the networl< overhead as the browser needs to 
make fewer requests. M inification worl<s by removing irrelevant codefrom these files. Combining 
these two techniques greatly enhances the performance of your site. 

The cool thing about bundling and minification is that they are really simple to do, and require 
hardly any code. Asan example, imagine you have two CSS files in your styles folder called i.css 
and 2 .CSS. W ithout bundling and minification, you may have something lil<ethis in your master 
page: 

<link href ="Styles/l . CSS" rel="stylesheet" type="text/css" /> 
<link href ="Styles/2 . CSS " rel="stylesheet" type=" text/ess" /> 

To enable bundling and minification, you change these two lines into the following single line: 

<link href ="Styles/css" rel="stylesheet" type=" text/ess" /> 

N otice that you no longer specify a filename after the folder name. I nstead, you just specify a file 
extension — ess in this case. This instructs the ASP.N ET run time to tal<e all files with a .ess 
extension from the styles folder, bundle them into a single response, and minify them by remov- 
ing unnecessary content lil<e whitespaceand comments. Thisfinal result isthen streamed to the 
browser, where it's interpreted in exactly the same way as it was with the two separate files. 

You can bundleand minimizeJavaScript files the same way by specifying js as the file extension 
rather than ess. 

0 ne problem with the previous code example is that the browser caches the result for the U R L 
styies/css. Even if you change the underlying CSS or JavaScript files, the browser may continue 
to use the old files. You can overcome this problem by using theResoivesundieuri method and 
passing in the path to the C SS or J S files you want to bundleand minify. ResoiveBundieuri then 
generates a unique key for the files that is appended to the query string. As long as the files are 
unmodified on disk, ResoiveBundieuri keeps returning the same key, which tells the browser it's 
safe to keep using a cached copy of the file. H owever, as soon as you change one of the files, the key 
changes as well, which in turn causes the browser to request a fresh copy of the bundle from the 
server. You see how this works in the next exercise. 

Enabling bundling and minification in your ASP.N ET website is a three-step process: 

1. Install theM icrosoft.Web. Optimization package using NuGet. 

2. Enable bundling by writing some code in Global. asax. 

3. Remove existing <iink> and <script> elements pointing to CSS and JavaScript files and 
replace them with a single <iink> or <script> element per file type pointing at the correct 
source folder. 

The current Planet Wrox website doesn't benefit a lot from bundling and minification because the 
number of CSS and JavaScript files is quite low. In addition, the CSS for the site is placed in the 
Themes folder, which is not supported by the bundling and minification functionality. 
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H owever, to show you how to use bundling and minification in your own sites where it may resuit 
in improved performance, in thefoiiowing exercise you optimize a few styie sheets you add to the 
styles foider so their content is bundied and minified. 


TRY IT OUT 


Using Bundling and Minification 


In this exercise, you add two new CSS fiies to the styles foider. You then enabie bundling and minifi- 
cation for this foider so you can see how this affects the CSS code that gets sent to the dient. 

1. Create a new foider caiied styles in the root of your site. You may already have this folder from 
earlier exercises in this bool<, in which case you can sl<ip this step. 

2. Install theM icrosoft.Web. Optimization pacl<age. To do this, chooseToolso Library Pacl<age 
M anager o Package M anager Console and run thefoiiowing command: 

Ins tall -Package Microsoft .Web .Optimization 

3. Open up your Global .asax file and in the Appiication_start event handler that should already 
be there, add the following code below the line that creates the scriptResourceDef inition. 

VB.NET 

Microsoft . Web .Optimization. BundleTable .Bundles . EnableDef aultBundles ( ) 
C# 

Microsoft .Web . Optimization. BundleTable . Bundles . EnableDef aultBundles ( ) ; 

4. Add a new CSS file to your styles folder and call it Test i .ess. Remove the existing code and 
add thefoiiowing code to underline all headings at level one: 

hi 
{ 

text-decoration: underline; 

} 

5. Add another CSS file to your styles folder and call it Test2 .ess. Remove the existing code and 
add thefoiiowing code to change the color of all headings at level one to green: 

hi 
{ 

color: Green; 

} 

6. Open the Frontend master page and directly after the opening <body> tag add thefoiiowing 
<iink> element: 

<body> 

<link href ="<%=Microsoft. Web. Optimization. BundleTable. Bundles. ResolveBundleUrK 
"~/Styles/css")%>" rel="stylesheet" type="text/css" /> 

Because of the way ResoiveBundieuri works, you can't use it in the <head> section of the page 
and you'll get an error if you try. 

7. Save all your changes and request the homepage in your browser. N otice how the heading is now 
underlined and green. 
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8. Open the HTM L source for the page in the browser and locate the <iink> element near the open- 
ing <body> tag. It should lool< similar to this: 

<link href='7Styles/css?v=-204869685048678205" rel= " stylesheet " type= "text/ess " /> 

The V parameter ensures that the browser always gets a fresh copy of the page if you mal<e a 
change to the underlying CSS files. The exact value for the v parameter will be different on your 
machine. 

9. Request the URL set in the href attribute in your browser directly. Your browser's address bar 
should look similar to this: 

http: //localhost : 8631/Styles/css?v=-2 04 86 968504 8678205 

The CSS code you see should lool< similar to this: 

hi { text - decoration : underline } hi { color : green} 

10. Go bacl< to VS and delete Test2 .ess from the styles folder. 

11. Request the homepage in your browser again. The heading should still be underlined, but the green 
font has now gone. 

12. Repeat steps 8 and 9 and notice how both the query string parameter and the CSS have changed to 
reflect the deleted style sheet. 

How It Works 

W hen ASP.N ET encounters a request for a folder followed by a file extension (for example, 
/styies/css or /Scripts/ j s), ittal<esall fileswith the extension in the folder, combines them 
into a single file, and then optimizes the code by removing unneeded code such as comments and 
irrelevant whitespace. The result of this operation is streamed back to the browser as a single 
file. To overcome caching issues, you don't point to /styies/css from your server code directly. 
Instead, you call theResoiveBundieuri method on the Bundles collection to create a path that 
contains a cache key. W henever the underlying files change, the cache key changes as well, which 
causes the browser to fetch afresh copy from the server. To enablethe bundling and minification 
in the first place, you call EnabieDef auiteundies on the Bundles collection during the website's 

start event i n Global . asax. 

N otice how in the final CSS from step 9 the underline property comes first. The standard logic 
for the bundling mechanism is to put files in alphabetical order. Some exceptions to this rule exist. 
For example, known frameworks such as jQ uery that other code may depend on are included first 
to avoid dependency issues. 

Bundling and minification are fully extensible, meaning you can fully customize the way the files 
are included and minified. For more information, check out this blog post: http ://tinyuri .com/ 

c63reut. 


N ow that you have seen how you optimize your site for the way CSS and script references are han- 
dled, you're ready to create a copy of the site for deployment. 
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COPYING YOUR WEBSITE 

During development of your site, you use IIS Express, which ships with Visual Studio. Although this 
server is great for local development, it's not designed to be used in a production environment. To 
put your site in production, you need to deploy it to a machine that runs the full version of I nternet 
I nformation Services (I I S), M icrosoft's professional web server. I n this section you see how to prepare 
your site so it can be run under IIS. Later in this chapter, you see how to install and configure IIS. 

To deploy your website to a production server, the deployment targets shown in the following table 
are available, right from within VS. 


DEPLOYMENT OPTION 

DESCRIPTION 

File System 

Enables you to create a copy of the site on the local filesystem of your 
development machine or a networked machine. This option is useful if you 
want to move the files manually to your production server later. 

Local IIS 

Enables you to create a copy of your site that will run under your local IIS 
installation. 

FTP Site 

Enables you to send the files that make up your web application directly to 
a remote server using FTP. 

Remote Site 

Enables you to send the files that make up your web application to a 
remote IIS server. For this option to work, the remote server needs to have 
the Front Page Server Extensions installed. Check out the documentation 
that comes with IIS or consult the administrator of your remote server for 
more help with this option. 


If you are using a commercial version of Visual Studio, you can access these four deployment targets 
from the two main ways of deployment that Visual Studio offers: Copy Web Site and Publish Web 
Site. If you're using the free Express edition, you can use only Copy Web Site. The Copy Web Site 
option simply creates a copy of the site whereas Publish Web Site also compiles all the code into one or 
more assemblies (.dii files), mal<ing it impossibleto change the code on the server. For a description 
of the differences between the two, checl< outthisM SDN article; http://tinyuri.com/9e6gad5. 


NOTE At the very beginning of this book, you learned about the differences 
between Web Site Projects (WSP) and Web Application Projects (WAP). For this 
book, I have chosen to use the WSP model because it's easier to work with for 
beginners and supports a few features not available to WAPs (such as Profile 
and the dynamic App_code folder). Unfortunately, there is one major feature that 
WAP supports and WSP doesn't: Web Packaging. This is a mechanism to create 
a setup package of your entire website so it can easily be deployed to a produc- 
tion server, taking the differences in configuration between the development and 
production machines into account. For more information about Web Packaging 
in WAPs, check out the list of links on deployment at the Visual Studio Team blog 
via http : //tinyuri . com/webDepioymentoverview. Although the articles target 
Visual Studio 2010, you'll find that the concepts discussed still apply. 
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Creating a Simple Copy of Your Website 

The Copy Web Site command simply creates a copy of your site using any of tliefour transportation 
options. Tliis is a great way to quicl<ly copy your site to anotlier location, including your produc- 
tion server, or even to a portable media device lil<e a USB sticl< that you can take with you. You can 
access the Copy Web Site option from the main Website menu or by right-clicl<ing the site in the 
Solution Explorer. 

Before you create a copy, it's a good idea to checl< the state of your website. You should do a full 
recompile where Visual Studio compiles all thecodeand pagesin your website. Thishelpsyou 
detect any problems in your website before you deploy it to a production environment. 

Deploying a site is also a good moment to do some housekeeping. To avoid slowing down the 
deployment process and to keep your site as lean and clean as possible, you should delete the files 
from your website that you don't need in production. 

In the next exercise, you see how to use the Copy Web Site command to create a copy of the entire 
Planet Wrox project. In a later exercise, you use this copy again when you configure IIS for your 
production website. 


TRY IT OUT 


Using the Copy Web Site Option 


In this Try It Out, you use the Copy Web Site option together with the Local File System option to cre- 
ate a copy of the site. The other three transportation options (FTP, Local IIS, and Remote IIS) work 
similarly. The biggest difference with these options is that they ask you for details about the destina- 
tion, such as a username and password, or the IIS website you want to use. With the copy you create 
in this exercise, you can configure an IIS website manually, something you see how to do later in this 
chapter. 

1. Close all open files in Visual Studio and then choose Build o Rebuild Web Site from the main 
menu. Doing so forces Visual Studio to recompile the entire site even if it already had compiled 
some parts of it. Visual Studio lists any problems your site may have in the Error List. To verify 
that your site is error free, open the Error List (choose View o Error List from the main menu) and 
make sure you don't have any compilation errors. Fix any errors you may have in your site. 

2. When theError List isempty, choose Website c> Copy Web Siteor right-click thesitein the 
Solution Explorer and choose Copy Web Site. 

3. At the top of the dialog box, click the Connect button to bring up a dialog box that enables you to 
choose the destination location for your site. 

At the left side of the dialog box, make sure that File System is selected. Then on the right side, 
locate the c:\BegASPNET folder, click it once to select it, and then click theCreateNew Folder 
button at the top-right corner of the dialog box. Type Release and press Enter to apply the new 
name. Figure 19-3 shows the final dialog box. 
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FIGURE 19-3 


Click Open to choose c:\BegASPNET\Reiease as the desti nation location for your copy 
operation. 

4. In the Copy Web Site dialog box, put focus on the list at the left by clicking a file or folder and 
then press Ctrl+A to select all files in the Source Web Site list. 

5. Click the Synchronize Selected Files button (the third button with the two arrows facing in oppo- 
site directions) between the two lists, visible in Figure 19-4. This starts the synchronization process. 
Because the folder displayed on the right side is empty, all files from the left list are copied to the 
right. W hen copying is complete, your dialog box should look like Figure 19-4. 

6. N ext, open File Explorer (on Windows 8) or Windows Explorer (on older versions of Windows) 
and browse to c:\BegASPNET\Reiease. Verify that all relevant files that make up your site are 
there. 
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Hon/ It Works 

The Copy Web Site option simply creates a copy of all files that make up your site. It can create a copy 
of the site at different locations, including the local filesystem, an FTP server, and an IIS server. In this 
exercise, you created a copy at a local hard drive. Thefirst two buttons with arrows between the two 
file lists in Figure 19-4 enable you to copy files from the source to the remote location or vice versa. 
The third button, with the two arrows, enables you to synchronize, rather than just copy over the files. 
W hen you create a copy on your local system this may not seem lil<e a big deal, but when you're creat- 
ing the copy over a slow FTP connection, you'll be glad this tool uploads only new and changed files, 
and leaves unmodified files untouched. If the same file has been changed in both the source site and 
the remote site and you synchronize these files, the tool prompts you to indicate in which direction you 
want to copy. Lil<ewise, if you synchronize a file that has been deleted in one site, the tool will prompt 
you to indicate if you want to delete the file from the other site. 

In this exercise, you opted to copy the files to the local filesystem. This is a great way to create a copy 
that is detached from the development environment that can be run on your local machine. You can, 
of course, copy the same set of files to another machine using an FTP program, a USB sticl<, and so on. 
Also, if you host your site externally, your hosting provider may offer a web-based interface to upload 
these files to its server. 

The detached local copy enables you to make modifications to a few files first (like web. config) and 
then upload everything to your host. 
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Besides copying a website, tlie commercial versions of Visuai Studio aiso support pubiisliing your 
website. 

Publishing Your Website 

TliePubiisli Web Site command, avaiiabieoniy in tiie commercial versions of Visuai Studio and not 
in tiie Express edition, is similar to tiie Copy Web Site option in tliat it creates a copy of tiie website 
you can use for deployment. H owever, it's different in tliat it enables you to precompile the appli- 
cation, whicli means all the code in the Code Behind of your ASPX pages, controls, code files in 
App_code, and so on are compiled into .N ET assemblies; files with a .dii extension, stored in the 
bin folder of your site. The main benefits of precompiling are source protection (others with access 
to the server can't look into your source) and an increased performance the very first time a page is 
requested. Pages that are not precompiled are compiled on the fly when they are requested the first 
time, which tal<es a little bit of time. Remember that regular visitors to your site will never be able 
to see the source of your application. All they'll be able to see is the final HTM L that gets sent to the 
browser. 

The Publish Web Site command is available from the Build menu and brings up the dialog box 
shown in Figure 19-5. 
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I 

FIGURE 19-5 

Clicl<ing the ellipsis at the end of the Target Location brings up thesamedialog box shown in Figure 
19-3, enabling you to choose a target location. W hen you select the Allow This Precompiled Site to 
Be Updateable option. Visual Studio compiles all yourVB.N ET and C#codeinto .N ET assemblies 
and places them in a bin folder at the root of your site. It leaves the markup in ASPX and ASCX 
files alone. H owever, with this option turned off, all the markup code is compiled into .dii files 
as well. The actual files still need to be deployed to the server, but their content has been replaced 
with placeholder text; "This is a marker file generated by the precompilation tool, and should not 
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be deleted!" When the page is requested by a browser, theASP.N ET run time finds the appropriate 
content in the assemblies in thebin foider and serves its content as if it were a normal page. This 
latter option is especially great if you want to prevent other people with access to your server from 
altering your site after it has been deployed. Because all the source and markup is compiled into 
.dii files, there is no way to change it on the server anymore, other than uploading a new set of 
published files. 

Copying or publishing your website to a new folder on your local system is only one step of the 
deployment process. The next part is configuring the web server so it l<nows whereto lool< for 
your files. 

RUNNING YOUR SITE UNDER IIS 

Up until now, you've been using IIS Express, which ships with Visual Studio, to debug and test your 
application. H owever, because requests to this server are limited to those coming from the localhost 
to minimize security implications, you'll need to use the full IIS, which comes with most major 
Windows versions. To have your website run under IIS, you need to perform the following steps: 

1. Install and configure IIS. 

2. lnstallandconfigurethe.NET Frameworl< 4.5. 

3. Configure security settings. 

Depending on the current state of your system, some of these actions are optional. In thefollowing 
sections, you see how to carry out these steps. 


NOTE Installing and configuring a web server can be a complex task. You have 
many factors to take into account, including your operating system, Its configura- 
tion, the account you use to log on to your machine, the final SQL Server you're 
going to use, and more. Don't panic if you get stuck. Instead, visit the IIS website 
at www . iis . net for detailed walkthroughs, or come over to this book's own dis- 
cussion forum at http : //p2p . wrox . com where you'll find fellow programmers 
(including me) that will help you succeed. 

The steps described in the remainder of this chapter should work on Windows 
7, Windows 8, Windows Server 2008 R2, and Windows Server 2012. For a lot 
more Information about IIS, including help with installing IIS on older versions of 
Windows not discussed here, check out the official IIS website at www . iis . net. 


installing and Configuring the Web Server 

Although IIS ships with most Windows versions, it's not installed by default, so you need to do that 
first. You also need to make sure that your version of Windows supports IIS. Although the Starter 
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and H ome Basic versions of Windows 7 and 8 sliip witli some parts of IIS, you can't run ASP.N ET 
pages on tiiem, so you need at least tiie H ome Premium edition. 0 n tiie server-based versions of 
Windows, IIS is fully supported. If you're hosting your site with an external hosting company, you 
can sl<ip the following sections on installing IIS. 


NOTE Even though IIS is supported on consumer versions of Windows such as 
Windows 7 and 8, it doesn't mean these operating systems are the best choices 
for hosting your website. You typically use these versions of Windows for local 
development and testing, whereas the server versions of Windows (such as 
Windows Server 2008 R2 and Windows Server 2012) are used for hosting pro- 
duction websites. 


To install and configure I IS on your Windows machine, you need to be logged on as an 
Administrator. If the account you use to log on to your machine does not have administrative privi- 
leges, you need to asl< your administrator to install and configure IIS for you. 

In addition to installing IIS, you also see how to createand configure the website in IIS. Because 
of the way security worl<s under Windows, your site probably won't work immediately after you 
configure IIS unless you change some of the security settings under Windows. You see how to do 
this in the section "Understanding Security in IIS" and the Try It 0 ut entitled "Configuring the 
Filesystem." 

You'll be able to test out your IIS settings more easily if you already have SQL Server 2012 Express 
installed. This is the case if you followed along with the exercises in Chapter 12. If you haven't 
installed SQL Server 2012 Express yet, refer to the section "Installing SQL Server 2012 Express" in 
Chapter 12 for installation instructions. If you haveoneof the commercial versions of SQL Server, 
or have SQL Server on a remote machine, pay special attention to the section "M oving Data to a 
Remote Server" in this chapter and to Appendix B. 

Making Sure IIS Is Installed 

The easiest way to install IIS is through the Web Platform Installer (W PI). W PI is installed with 
Visual Studio so if you're carrying out these steps on your development machine, you already have 
the W PI. If you're following these steps on another machine (running Windows Server for example), 
you need to download and install W PI first. You can download W PI from www. asp. net /down- 
load and install it by clicl<ing the Install N ow button. If this linl< has changed by the time you read 
this document, go to www.microsoft.com/web/downioads instead, or search the web for "Web 
Platform Installer download" to find one of the other M icrosoft locations that lets you download 
and install WPI. 

0 nee W PI is installed, it starts automatically, or you can run it from the W indows Start menu 
or Start screen. W hen it's done loading, switch to the Products tab, at the top of the screen enter IIS 
recommended, and press Enter. W PI should list the IIS Recommended Configuration, as shown in 
Figure 19-6. 
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FIGURE 19-6 


Click Add to add this item to tlie list of items to be installed. If the Add button is disabled, parts of 
IIS are already installed. 

N ext, use the search box again and search for IIS: ASP.N ET. Depending on your version of 
Windows, this should bring up an item called IIS: ASP.N ET or IIS: ASP.N ET 4.5 (as well as other, 
unrelated items). ThellS: ASP.N ET or IIS: ASP.N ET 4.5 item is needed to run ASP.N ET under IIS, 
and is a critical component to run your site successfully. Select this item and clicl< Add. If you see 
both items choose IIS: ASP.N ET 4.5. Finally, clicl< thelnstall button at the bottom of the screen and 
then accept the license terms. After a while, you should get a confirmation that IIS and its compo- 
nents were installed successfully. 

For detailed instructions on manually setting up IIS, checl< out these articles on the official IIS 
website: 

http : //tinyurl . com/lISServer2008 
http : //tinyurl . com/lISServer2012 

W hen IIS is installed successfully, you need to mal<e sure you have the M icrosoft .N ET Framework 
version 4.5 installed. 

Installing and Configuring ASP.NET 

If you installed Visual Studio 2012 (any edition) on your target machine or you're running W indows 
8 or Windows Server 2012, you already have the .N ET Framework 4.5 installed. Otherwise, you 
need to download it. You can use the Web Platform Installer as discussed earlier, or you can down- 
load the redistributable package from the M icrosoft site at http: //msdn. microsoft .com/en-us/ 
netframework. Follow theDownload or Install link or use the search option and search for "down- 
load .N ET Framework 4.5." M akesureyou download the full version of the .N ET 4.5 Framework 
and not an earlier version or the Client Profile package. After you have downloaded the .N ET 
Framework, run the installer and follow the on-screen instructions. 
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If you already had the .N ET Framework 4.5 on your machine and installed IIS afterward, you need 
to tell llSabout the existence of the frameworl<. Normally, this is done during installation of the 
.N ET Frameworl<, but if you installed IIS later, you need to do this manually. You only need to do 
this on Windows? and Server 2008 R2. For Windows 8 and Server 2012, ASP.N ET 4.5 is regis- 
tered correctly when you install IIS through the W PI. To register ASP.N ET in IIS, follow these steps: 

1. 0 pen a command prompt in Administrative mode. To do this, clicl< the Start button, type 
cmd in the search box, and press Ctrl+Shift+Enter to start the command prompt with elevated 
permissions. When you confirm the action, the command prompt will open with elevated 
permissions. 

2. N avigate to the .N ET Frameworl< version 4 folder by entering the following command and 
pressing Enter: 

cd \Windows\Microsof t .NET\Framework\v4 . 0 .30319 

Because .N ET 4.5 is an in-place replacement for .N ET 4, this folder uses the 4.0 version 
number. N otethat the actual version number following v4 . o may be slightly different on 
your machine if newer versions of the .N ET Frameworl< have been released by the time 
you read this bool<. Also, if you are using a 64-bit version of W indows, you should use the 
Framework64 folder. U se W i ndows Explorer to find out the correct folder before you enter it 
at the command prompt. 

3. Type aspnet_regiis -i and press Enter again. 

After a while, you should get a message that ASP.N ET 4.5 was registered with IIS 
successfully. 

N ow that IIS and the .N ET Frameworl< have been installed and configured correctly, the next step is 
to configure your website under IIS. You see how to do this in the next Try It Out exercise. After the 
Try It Out, you learn more about configuring security permissions for your system. 

^^^^^^Q Configuring Your Site 

In this exercise, you see how to configure the standard "Default Web Site" that ships with IIS. Although 
it's possible to create more than one site under IIS on Windows 7, Windows 8, Windows Server 2008 
R2, and W indows Server 2012, this option is not discussed here. Contact your system administrator or 
read the documentation that comes with IIS to learn more about creating multiple websites under IIS. 
M ost of the steps in Windows 8 are identical to those in W indows 7, Windows Server 2008 R2, and 
Windows Server 2012. H owever, the screens you see in the following exercise are tal<en in Windows 8 
and are slightly different on the other operating systems. 

If you're doing this exercise on a machine other than the one you used to build the Planet Wrox site, be 
sure to copy theeegASPNET folder to the root of the C drive of the target machine. Also mal<e sure this 
machine has access to SOL Server 2012, installed either locally or on another remote machine. 

1. Open the Internet Information Services (IIS) M anager. You find this item in the Administrative 
Tools section of the Control Panel, which you can access through its System and Security category. 
Alternatively, clicl< the Start button or Start screen, type inetmgr, and press Enter. If you get a 
question about learning more about W PI, clicl< N o (you could clicl< Yes if you wanted to; if you 
do, you're tal<en to the main WPI section of the M icrosoft website). 
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2. Expand the tree on the left until you seeApplicatlon Pools and the Default Web Site, as shown in 
Figure 19-7. 
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FIGURE 19-7 


Clicl< the Application Pools item and confirm you have an entry called .N ET v4.5 that uses v4.0 
as the .N ET Frameworl< version and that has its M anaged Pipeline M ode set to Integrated. If you 
don't have this item, clicl< Add Application Pool in the Actions panel on the right and create a new 
application pool called .N ET v4.5 using the. N ET Frameworl< v4. 0.30319 with Integrated as the 
M anaged Pipeline mode. 


NOTE Although the website you built runs on .NET 4.5, you still need to choose 
.NET v4.0 as the Framework version for the application pool. The reason for this is 
that ASP.NET 4.5 uses the .NET 4.0 run time which is what you're configuring here. 


4. Select the.N ET v4.5 application pool (whether it was already there or not) and click Advanced 
Settings in the Actions panel on the right. Locate the property called Identity and ensure that it is 
set to ApplicationPoolldentity. If it's not, clicl< the button with the ellipsis choose the correct item 
from the Built-in Account drop-down list and clicl< OK. You use this identity later when configur- 
ing security. In the same dialog box, mal<e sure the Load User Profile option is set to True. Your 
final screen should look like Figure 19-8. 
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Click OK to close the Advanced Settings dialog box. 

5. Click the Default Web Site Item to select It and click Advanced Settings In the Actions panel on the 
right of Figure 19-7. 

6. In theAdvanced Settings dialog box, click the Physical Path property, click theelllpslsto open up a 
folder browser, select the folder c:\BegASPNET\Reiease, and click OK to confirm the path. 

7. In the same dialog box, click Application Pool, then click the ellipsis, choose the application 
pool from step 3 labeled .N ET v4.5, and click OK. Your Advanced Settings dialog now looks like 
Figure 19-9. 
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Click OK again to close the Advanced Settings dialog box. 

8. N ext you need to make sure that IIS Is configured to use a sensible default document; the docu- 
ment that Is served when you request a folder name or the root of the site. The Planet Wrox site 
uses Default .aspx, whIch Is the most common default document name for ASP.N ET websites. To 
check this, make sure Default Web Site Is the selected option In thetreeon theleft. Then double- 
click the Default Document option In the IIS Features list (below the Items you see In Figure 19-7). 
M ake sure that Default .aspx Is present and at the beginning of the list. If the Item Is not there. 
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add it manually. To do this, click the Add linl< in theActions panel to add it. Then use the M ove 
Up links to move it to the top of the list. Click Yes when you seethe warning about inheriting 
changes. Your dialog box should look similar to Figure 19-10. 
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9. You can now close the Internet Information Services M anager, because the site is configured cor- 
rectly as far as IIS is concerned. H owever, it still won't run correctly because you need to configure 
security permissions on thefilesystem, as you see later. 

How It Works 

Each new IIS installation has a Default Web Site, the site that listens to http: //locaihost by default. 
In this exercise, you configured this default website to run Planet Wrox, but you can also create a whole 
new site that can run side by side with other websites. You pointed the root of the site to the Release 
folder that contains your website. With that mapping set up, IIS is able to see what files to serve when 
you request a U RL likehttp://iocaihost. It means that a U RL likehttp: //locaihost/Login.aspx 
is mapped to the physical file at c:\BegASPNET\Reiease\Login.aspx. You also assigned the website 
an application pool — an IIS mechanism to isolate and configure one or more IIS websites in one fell 
swoop. Two websites running in different application pools do not affect each other in case of a prob- 
lem such as a crash. In this exercise you selected an application pool that uses the .N ET 4.5 Framework 
and that uses the Integrated Pipeline mode. In thismode, llSand ASP.N ET are tightly integrated, 
which meansyou can useASP.N ET features (such as Forms Authentication, which you saw in Chapter 
16) in standard IIS functionality such as serving static files. For more information about this mode, 

check out the official IIS website via http://tinyurl.cora/lntegratedPipelineMode. 
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At the end of the exercise, you configured a defauit document, the fiie that is served when you 
request a U RL without an expiicit fiiename, iii<e http: //locaihost/ or http: //locaihost/ 
Reviews/. When you configure Defauit.aspx asthedefauit document, llStriesto find and servea 
fiie by that name. 


Thefinai thing you need to do to mai<e sure your site runs on your iocai IIS instaiiation is configure 
the security settings. This is discussed in thefoiiowing two sections. 

Understanding Security in IIS 

Because of the seamiess integration with IIS Express, you may not reaiize what happens under the 
hood, and what security settings are in effect when you browse pages in your site. To use resources 
in your site, such as ASPX fiies. Code Behind fiies, the database in the App_Data foider, and the 
images in your site, your web server needs permissions from Windows to access those resources. 
This means that you need to configure Windows and grant access to those resources to the account 
that the web server uses. But what exactiy is that account? The specific account that needs permis- 
sion depends on a number of factors, induding the version of W indows, whether you run your site 
under IIS or IIS Express, and on a number of settings within IIS. 

In most cases, however, you haveoniy two scenarios to consider: using IIS Express or thefuii ver- 
sion of IIS as your web server. 

In the former case, the account that IIS Express uses is the account you use to iog on to your 

Windows machine. This account is USUaiiy something iii<eDomainNarae\UserName or MachineName\ 

UserName. W hiie iogged in with this account on Windows, you start up Visuai Studio, which in 
turn starts up IIS Express. This means that the entire web server runs with your credentiais. Because 
it's iii<eiy that you're an Administrator or a power user on your iocai Windows machine and have 
permissions to access aii fiies that mai<e up your site, things probabiy wori<ed fine so far without any 
changes to the security settings. 

In the i after case, where IIS is used, things are quite different. By defauit, an ASP.N ET appiica- 
tion under IIS runs with a speciai account created when you instaiied IIS. This account is caiied 
A ppiicationPooi Identity. 

You won't find the AppiicationPooildentity user account on your system directiy, because it depends 
on the name of the configured appiication pooi. 

Because the appiication pooi you saw eariier runs in Integrated Pipeiine mode, you oniy need to 
configure a singie user account. If you are running in Ciassic mode (which isn't necessary for the 
Pianet Wrox website) you aiso need to configure another account caiied lUSR . This account is used 
by IIS to serve non-ASP.N ET content such as H TM L fiies and images. Consuit the IIS documenta- 
tion for more information about Ciassic mode and the lUSR account. 

After you have determined the account that you need to configure, thefinai step is to configure the 
fiiesystem. 
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NTFS Settings for Planet Wrox 


Regardless of the account you are using, you need to make changes to the Windows fi I esystem so the 
web server isaiiowed to access your resources. 


FOLDER NAME 

PERMISSIONS 

E X P L A N AT 1 ON^^^^^^^^^^^I 

Release {located at C : \BegASPNET\) 

List folder contents 
Read 

The web server account needs 
to be able to read all the files and 
folders that make up the website. 
Child folders, like Reviews, need to 
be set up to inherit these settings. 

App Data 
GigPics 

(both located under c : \BegASPNET\ 
Release) 

Modify 

The web server account needs to 
be able to read from and write to the 
Microsoft SQL Server databases in 
the App Data folder. It also needs 
to be able to save the uploaded 
images in the GigPics folder. 

C : \TempMail 

Modify 

If you're dropping your e-mails 


locally, you need to configure the 
TempMaii folder as well. 


If you came herefrom Chapter 12 to iearn how to configure N TFS for theApp_Data foider, you can 
ignore the Release foider that was created eariier in this chapter. Instead, grant M odify permissions 
for your own account to theApp_Data foider of your site at C:\BegASPNET\site as per the instruc- 
tions in the next exercise. You may need to do the same for theGigpics foider, which you couid cre- 
ate now at the root of your site, or return to this section after you created the foider in Chapter 14. 

In thefoiiowing exercise, you iearn how to configure the security settings for these foiders. 


lUmmg^Q Configuring the Filesystem 

In this Try It Out, you see how to configure the fiiesystem for the Pianet Wrox website. The exercise 
shows you screenshotsfrom Windows 8, but the other flavors of Windows have similar screens. Search 
Windows help for "security N TFS" or contact your administrator if you're having problems carrying 
out thefoiiowing steps. 

1. Start by opening a File Explorer (called Windows Explorer on versions of Windows before 
Windows 8 and Server 2012) and then locate your C drive. 

2. Browse to C:\BegASPNET, Visible in Figure 19-11. 

3. Right-clicl< the Release folder, choose Properties, and switch to the Security tab (see Figure 
19-12). If you don't see the Security tab, your disl< is probably not formatted using NTFS and you 
can skip this exercise. 
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4. The next step is to add the web server account. Click the Edit button visible in Figure 19-12, and 
then clicl< theAdd button. Type IIS AppPool\ followed by the name of the application pool. If you 
followed along with the previous exercises, the application pool is called .N ET v4.5 which means 
the account name is IIS apppooi\.net v4.5. Clicl< OK to add theaccount. 

With the account selected in the Group or User N ames list, ensure that only List Folder Contents 
and Read are selected. Your dialog box should end up similar to Figure 19-13. 
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5. Close the dialog box so you return to the Release Properties dialog box shown in Figure 19-12. 

6. Clicl< the Advanced button to open the Advanced Security Settings dialog box again. For Windows 
7 and Server 2008 R2, clicl< the Change Permissions button and checl< the Replace All Child Object 
Permissions checl< box. For Windows 8 and Server 2012, you find this checl< box on the Advanced 
Security Settings dialog box directly. This forces Windows to apply the same security settings to all 
sub files and folders, replacing all existing settings. Clicl< OK and then confirm the changes that 
will be made. Finally, close all remaining open dialog boxes. 

7. Back in File Explorer / W indows Explorer, right- 
clicl< App_Data from the Release folder. Open its 
Properties dialog box and then its Security tab, and 
edit the permissions for the web server account you 
added in step 4 by adding M odify permissions (this 
in turn causes some of the other permissions to be 
selected as well). You need to clicl< the Edit button 
first to bring the Properties dialog box in editable 
mode. Figure 19-14 shows the completed dialog. 

Click OK to close the dialog box. 

8. Repeat this step for the cigpics folder and option- 
ally for theTempMaii folder. 

9. If you are using llSon a machine that has SOL 
Server Express, the final thing you need to do is 
modify your connection strings. If you don't have 
SO L Server Express installed, refer to the start of 
Chapter 12 that shows you how to install SOL 
Server Express Edition as well as SOL Server 
M anagement Studio Express Edition. If you're using 
a different database server, or if you only have SOL Server Local DB Edition installed and don't 
want to install SOL Server Express, look at the section "M oving Data to a Remote Server" later in 
this chapter and look at Appendix B, which explains how to configure a different SOL Server. 

To modify the connection string, open up web.config and replace both occurrences of 
(LocaiDB)\vii.o in the connection strings with .\sqiExpress. Thistargetsa named instance 
of SOL Server called sqiExpress on the local machine (identified by the dot (.)). In addition, add 
User instance=True to both Connection strings to run SOL Server under the same user account 
as the website. Your connection strings should end up like this: 

< connect ionSt rings > 

odd name="PlanetWroxConnectionStringl " connect ionString= "Data 

Source= . \SqlExpress ; AttachDbFilename= | DataDirectory | \PlanetWrox.mdf ; 
Integrated Security=True;User Instance=True" 

providerName= "System. Data . SqlClient " /> 
<add name="PlanetWroxEntities" connectionString="metadata= 

res : / /*/App_Code . PlanetWrox. csdl | res : / /*/App_Code . PlanetWrox . ssdl 
res : //*/App_Code . PlanetWrox. msl ;provider=Syst em. Data . SqlClient ; 
provider connection string=&quot ; data source= . \SqlExpress ; 
attachdbf ilename= I DataDirectory | \ PlanetWrox. mdf ; 
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integrated security=True;User Instance=True ; 

MultipleActiveResultSets^True ; App^EntityFrameworkiquot ; " 
providerName= "System. Data . EntityClient " /> 
< /connect ionSt rings > 

10. To check if the site worl<s, open a browser and go to http : //locaihost. Y ou should see the 
Planet Wrox website appear. To verify that everything is in order, browse through the site by 
requesting pages from the main menu, filling in the contact form, creating a new album, uploading 
pictures, and so on. If you get an error, refer to the section "Troubleshooting Web Server Errors." 


NOTE If you still can't make it work, try configuring the filesystem for the 
Everyone group. Although, from a security point of view, this is absolutely not 
the recommended group to use in a production environment, it may help you in 
finding out whether it's a security issue. If it works for the Everyone account, it's 
indeed security-related, so you need to moke sure you configured the correct 
accounts. Don't forget to remove the Everyone account later again. If you keep 
having problems, refer to the next section where you find a number of problems 
you may run into while deploying as well as a solution. 


How It Works 

On a standard W indows system, all files and folders are protected using Windows N TPS. To ensure 
proper operation of your website, you need to grant the account used by the web server the neces- 
sary permissions to the files and folders of your website. For most files and folders. Read permission is 
enough. H owever, for a few folders you need to change the permissions. Both App_Data and cigpics 
are written to at run time so you need to grant M odify permissions to these folders. In addition, you 
need to configure c: \TerapMaii if your site drops e-mails there locally. 

In order for your site to connect to a database, you changed both connection strings in web.config to 
target an instance of SQL Server called sqiExpress. The Local DB Edition you used before is great for 
local development, but notfor running your production sites. Instead, you can use SQL Server Express 
Edition or one of the commercial versions of SQL Server. Appendix B digs much deeper into configur- 
ing your site to worl< with versions of SQL Server other than Express. 


Troubleshooting Web Server Errors 

W hen you try to access your site in a web browser, you may run into a number of problems. The 
first thing you need to do to get helpful error messages is to change the <customErrors> sec- 
tion in Web.config from On to Off or Remoteoniy. This mal<es it easier to see what's going on. 
Additionally, you may want to check out the W indows Event Viewer (type eventvwr from the Start 
menu or Start screen) for more details about errors and hints how to solve them. 

This section lists the most common problems and provides a fix for them. You should realize a large 
number of possible reasons exist for the errors you may get, so it's impossible to cover them all here. 
If you run into a problem you can't solve, turn to this book's forum at the Wrox community site at 
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http://p2p.wrox.com. You'll find many helping hands (including mine) that understand your prob- 
lem and can help you find a solution for it. 

>- It is an error to use a section registered asaiiowDefinition='MacliineToAppiication' beyond 
appiication ievei — You get this error when your website is not at the root of the web server, 
or you haven't configured the folder as a separate application. Given the current configura- 
tion for the Planet Wrox site, you get this error when, for example, you map your site in IIS 
to c : \BegASPNET and then browse to http : //locaihost/Reiease. To fix this error, mal<e 
sure that the root of your IIS website points to the folder that contains your main web 
.conf ig file; C:\BegASPNET\Reiease, in this case. You get the same error when you open 
an incorrect folder in VS; for example, when you open C:\BegASPNET and then browse to 
http://iocaihost:i2345/site. Instead, open C:\BegASPNET\site as the website in VS. 
You may also run into this error if a subfolder in your site contains a web.config file that 
tries to override settings that are meant to be defined at the root of the site only; for example, 
if you have a <meitibership /> element in the web.config file of the Management folder. 

>• HTTP Error 401.3- Unautliorized — You get this error when the account used by the web 
server does not have permission to read the files on disl<. To fix this problem, refer to the Try 
It Out entitled "Configuring the Filesystem" earlier in this chapter and configure the correct 
permissions. 

> Faiiedto update database "C:\BEGASPNET\RELEASE\APP_DATA\ASPNETDB.MDF" 
because tlie database is read-oniy — You getthiserror when either the database files have 
been marked as read-only, or if the account used by the web server is not allowed to write 
to the database files. In the former case, open the file's Properties in File Explorer / Windows 
Explorer and verify that the Read Only check box is cleared. In the latter case, ensure that 
the account used by ASP. N ET has at least M odify permissions on theApp_Data folder. 

>■ HTTP Error 403.14- Forbidden — Although thiserror seems to suggest a problem with 
NTFS permissions at first, it's often caused by an incorrect or missing default document. If 
you get this error, ensure that the site or folder you are accessing contains a document called 
Default . aspx and that you configured that document name as a default document in IIS. 

>• HTTP Error 404.0- Not Found — You get this error when you try to request a file or folder 

that doesn't exist, such as http : //localhost/DoesNotExist or http : //localhost/ 
DoesNotExist . gif . 

> An error lias occurred while establishing a connection to the server. W hen connecting to SQ L 
Server 2008, this failure may be caused by the fact that under the default settings SQ L Server 
does not allow remote connections, (provider: Named Pipes Provider, error: 40-Could not 
open a connection to SQ L Server). Alternatively, you may get the error: A network-related 
or instance-specific error occurred while establishing a connection to SQ L Server. T he server 
was not found or was not accessible. Verify that the instance name is correct and that SQ L 
Server is configured to allow remote connections, (provider: SQL Network Interfaces, error: 
26 - Error Locating Server/ Instance Specified) — You can get these errors for a number of 
reasons. Although the error message here mentions SOL Server 2008 explicitly, you can also 
get this error for other versions of SOL Server. Usually, this error is caused by problems 
reaching the configured database server. You can get it when you misspelled the server's 
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name in a connection string, tlie server is down, or tlie server can only be readied from tlie 
locai macliineand is not accessible over tlie networl<. To mal<e suretliat SQL Server is run- 
ning correctly, open the Services section of the AdministrativeTools (that you find in the 
Control Panel). Then look under SQL Server and verify that SQL Server is started. Appendix 
B explains SQL Server security in more detail and provides solutions to these problems. 

>- Failed to generate a user instance of SQ L Server due to faiiure in retrieving tlie user's local 
application data path. Please mal<e sure the user has a local user profile on the computer. The 
connection will be closed — You can get this error when you forgot to enable the "Load User 
Profile" option discussed in theTry It Qut titled "Configuring your Site." 

> H T T P E rror 500.2 1 - 1 nternal Server E rror H andler " PageH andlerFactory-l ntegrated" has a 
bad module "ManagedPipelineH andler" in its module list Detailed Error Information — You 

get this error when ASP.N ET is not registered with IIS. Refer to the section labeled 
"Installing and Configuring ASP.N ET" to learn how to fix this issue. 

Runtime Error Description: An application error occurred on the server. T he current cus- 
tom error settings for this application prevent the details of the application error from being 
viewed. Details:To enable the details of this specific error message to be viewable on the 
local server machine, please create a <customErrors> tag within a "web.config" configura- 
tion file located in the root directory of the current web application. This <customErrors> 
tag should then have its "mode" attribute set to "RemoteOnly". To enable the details to be 
viewable on remote machines, please set "mode" to "Off" — You may get this error when 
a runtime error occurs and the web.config does not contain a <customErrors> element. 
However, you may also get the same error when the web.config file itself contains an error; 
for example, when you forgot to close an element. To fix this latter category of errors, open 
the file in Visual Studio and it provides you with more details about the error. 

W hen you are deploying to a machine that also has SQL Server Express edition installed, you are 
done with the deployment process now. However, if you're dealing with a different SQL Server, the 
only thing that's left to do is to mal<e sure your new site has the required data. You see how to do 
this next. 


MOVING DATA TO A REMOTE SERVER 

Releasing a site to IIS on your local machine is pretty straightforward. You simply copy the data to 
a new location, configure IIS, change a few security settings, and that's it. Because the site continues 
to use your local copy of SQL Server, it will run fine. 

H owever, in the real world when you need to move your site to an external server or host, things are 
not so easy. Although copying the files that make up your site is usually extremely simple using an 
FTP program, copying data from your SQL Server database to your host isquite often a bit trickier. 
This is because most web hosts don't support the free Express or Local DB editions, so you can't 
just simply copy the .mdf files to the App_Data folder at your remote host. Instead, these hosts often 
offer the full versions of SQL Server, which you can access either with a web-based management 
tool or with tools such as SQL Server M anagement Studio. 
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Getting your database data from your local machine to your remote host is typically a two-step 
process: 

1. Create a .sqi script from your local SQL Server database. 

2. Send this script to your host and execute it there. 

In the next section, you see how to export your database to a .sqi file. I won't show you how to run 
that file at your host to re-create the database because this is different from host to host. Instead, I 
will give you some general pointers so you l<now what to lool< for with your host. 

Exporting Your Data to a File 

To mal<e it easy to transfer data from your local SQL Server database into a SQL Server database of 
your web host, SQL Server M anagement Studio comes with a tool to export your database structure 
and data to a file. This file then contains all the information required to re-create your database and 
its data at a remote server. 

In the following exercise, you see how to use SSM Sto export your database to a file. 


TRY IT OUT 


Exporting the Planet Wrox Database 


Thisexercise assumes you've already downloaded and installed SQL Server M anagement Studio 
Express Edition. If you haven't already done this, refer to the start of Chapter 12 for more details. 


1. 


2. 


3. 


4. 


Start SQL Server M anagement Studio from the 
Start menu or Start screen. You should see a 
screen similar to Figure 19-15. 

Enter (locaidb) \vii.o as the server name 
and clicl< Login. Y our pianetwrox database 
should already be listed, but if it's not, right- 
clicl< the Databases node, click Attach, and 
then browse for the pianetwrox.mdf file in 

your C:\BegASPNET\Site\App_Data folder. 

Right-clicl< the Pianetwrox database and 
choose Tasks o Generate Scripts. If you get a 
welcome screen, click Next. Ensure that Script 
Entire Database and All Database Qbjects is 
selected, and then click N ext. The dialog box 
shown in Figure 19-16 appears. 


Connect to Server 


m 


SQL Server 2012 


Server type: 
Server name: 
Authentication: 
User name 
Password: 


Database Engine 


Windows yVjthentication 


VS2ai2RTM\lmar 


n Remember password 


Ccnwct 


Caned 


0|iticns» 


FIGURE 19-15 


In this screen, you can choose between two Qutput Type options. The first enables you to create 
a text file with the necessary SQL statements, and the second option enables you to talk to your 
shared hosting provider over the Internet directly. If your host supports this, it can give you the 
necessary information to configure a provider here. For now, choose Save Scripts to a Specific 
Location. Then click the Advanced button and change the setting for Types of Data to Script to 
Schema and Data. The default value of Schema Qnly would only script your database structure, 
but not the actual records your tables contain. Set Script Use Database to False. With this setting 
set to True, code will be included to create a database at the App_Data folder, which likely won't 
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work on a machine otfier tlian your own. Clicl< OK to close tlie Advanced Scripting Options 
dialog box. 


Generate and Publish Scripts 



Set Scripting Options 


Summaty 

Save or Publish Scnpts 


Help 


Specify how scripts should be saved or published. 


Output Type 
(S) Save scripts to a specific location 
O Publish to Web senrice 


<S) Save to file 

1 Advanced j 

Files to generate: 

Single file 


'_' Single file per object 

File name: 

|C:\Usef5\lmar\DocumentsNscript-sql || ... | 


0 Oveiwrte existing file 

Save as: 

(?) Unicode text 


O ANSI text 

O Save to Qipboard 


O Save to new query window 



FIGURE 19-16 


5. Clicl< N ext twice and the wizard generates tlieSOL script for you in your Documents folder (as 
specified in the File N ame box shown in Figure 19-16). 0 pen the file in N otepad and look at the 
SQL statements it contains. Although most of it probably looks like gibberish to you, it can be used 
as is to re-create the database structure and data on a compatible SQ L Server database. 

How It Works 

The contents of a database can be separated in two categories: the structure of the database and the 
actual data. When the scripting tool runs, it investigates the structure of your database first and creates 
SQL CREATE statements for all the items it finds in your database, such as the tables you created in earlier 
chapters. It then creates insert statements that re-create all records such as Reviews, Genres, and even 
users in the target database. By clearing the Script All Objects check box at the beginning of the wizard, 
you can selectively choose parts of your database, enabling you to script only a few tables, for example. 

At the end, the scripting tool assembles all the SQL statements and saves them to a single .sqi file. This 
file is now ready to be run at your host to re-create the database. 
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Re-Creating the Database 

Although every host has its own rules and procedures when it comes to providing access to their 
SQL Server, they can be grouped in three categories. 


NOTE For detailed information about hosting your site with an external hosting 
party, check out the tutorials In the hosting section of the official ASP.NET site at 
www . asp . net/learn/hosting. 


First, some hosts don't give you remote access to their database and require you to submit a . sqi 
file so they can execute it for you. In this case, you don't have to do anything other than send the file 
and wait for the host to create your database. 

The second category contains the hosts that allow you to execute SQL statements through a web 
interface. You typically log in to your online control panel and then execute the SQ L statements 
created by the scripting tool, either by uploading the file or by pasting its contents in a text area in 
a web page. Regardless of the method, you then end up with a database that you can access from 
your application. H ow this worl<s exactly is different with each host, so consult the hosting service's 
help or support system for more information. Some known issues exist with web-based database 
management tools from some providers, resulting in errors when you try to run the generated SQL 
file. Although the file itself is technically valid, the tool may still run into issues with it. If that's the 
case, contact your host for help on resolving the issue. If you run into issues, one of the things you 
may want to try is to save your SQL file in a different format. The default format is Unicode, which 
not all providers understand. To change the format, choose AN SI Text for the Save As option when 
exporting your data, as shown in Figure 19-16. 

The final category contains hosts that allow you to connect to their SQL Server over the Internet. 
This enables you to use tools lil<e SQL Server M anagement Studio to connect to the database at your 
host right from your desl<top and execute the SQL scripts remotely. Refer to the first exercise in the 
section "Using SQL to Worl< with Database Data" of Chapter 12 to learn more about executing 
SQL files against a database using SSM S. 

After your database is re-created at your target server, you need to reconfigure your ASP.N ET 
application to use the new database by changing the connection strings in your website. For this 
to worl<, you need to modify two connection strings: the pianetwroxconnectionstringi and the 
pianetwroxEntities you Created in an earlier chapter. H ow your connection string must look 
depends on the database you are using and its configuration. Your hosting company or database 
administrator typically provides this information. For many examples of proper connection strings, 
check out www. connectionstrings . com. The following snippet providesa simpleexamplethat 
reconfigures your application to use a database server called Databaseserver. This example shows 
a connection string for a SQL Server that requires you to log in with a usernameand password (in 
your configuration file, each connection string should be on a single line); 

<connectionStrings> 

<add name=" Plane tWroxConnectionStringl" connect ionString="Data 

Source=DatabaseServer; Initial Catalog=PlanetWrox;User Id^YourUserName; 
Password^YourPassword; " providerName= " System. Data. SqlCl lent "/> 
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odd name="PlanetWroxEntities" connectionString="metadata=res://* 

/App_Code .PlanetWrox.csdl |res://*/App_Code . Plane tWrox. ssdl | res ://* 
/App_Code . PlanetWrox .msl;provider=System .Data . SqlClient ; 
provider connection string=S;quot;Data Source=DatabaseServer; 

Initial Catalog=PlanetWrox;User Id=YourUserName;Password=YourPassword; 
MultipleActiveResultSets=True&quot; " 
providerName = " System. Dat a. EntityClient"/> 
</connectionStrings> 

This points botli connection strings for tlie pianetwrox database to a different SQL Server. Consult 
Appendix B for more information about configuring your ASP.N EI application and SQ L Server to 
operate with each other. 

At this stage, you're pretty much done configuring your newly created website. Congratulations! 
H owever, before you relax and start enjoying your new website, read the following checl<list that 
helps you secure your site and improve its performance. 


THE DEPLOYMENT CHECKLIST 

instead of ending this chapter with general tips about deployment, this section gives you a practical 
list of things to checl< when you're ready to put your website in production: 

M al<e sure you don't have debugging enabled in theweb.config file. This causes unneces- 
sary overhead and decreases performance of your website, because code executes slower and 
important files cannot be cached by the browser. To ensure debugging is disabled, open the 
web.config file you are using for your production environment, and verify that debug is set 

to false: 

<compilation debug=" false "> 

>" M ake sure you have turned on custom errors by setting the mode attribute of the customEr- 
rors element in web.config to either on or Remoteoniy. In the first case, everyone sees your 
custom error pages, and in the second case, only users local to the web server can seethe 
error details. N ever leave the mode set to off, because doing so can lead to information dis- 
closure. The following snippet shows a safe configuration of the customErrors element: 

<customErrors mode= "On" def aultRedirect= " -/Errors/OtherErrors . aspx" > 

Optional <error /> elements go here 
</customErrors> 

>• Disable tracing, or at least limit the trace information to users coming from the local 

machine. The following <trace /> element from web.config blocl<s tracing for users com- 
ing from machines other than the web server itself. Additionally, it stops the trace informa- 
tion from appearing in the page: 

<trace mostRecent="true" enabled="true" requestLimit="1000" 
pageOutput= "false " localOnly= " true " / > 

>- Consider setting the retail attribute of the deployment element in machine. config to 

true: 

<conf iguration> 
<system.web> 
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<deployment retail="true"/> 
</ system. web> 
</conf iguration> 

This section is used to indicate tliat tlie server liosts production-ready versions of your sites, 
and for all sites on the server, changes all three previous items to a secure setting: debugging 
and tracing are disabled, and error messages are accessible only to local users. 

To mal<e this change, you need to be logged in as an Administrator on your system. Also, be 
sure to make a bacl<up copy of the file first. Because it serves as the root configuration file 
for all your ASP.N ET websites, you don't want to mess up this file. 

>• Scan your site for important files that may contain sensitive information (lil<e Word or text 
documents) and either exclude them from the release version or consider moving them to the 
App_Data folder. Files in that folder cannot be accessed directly. H owever, your own code 
can still access the files as you saw in Chapter 9. 

>■ M al<e sure you turn on error logging. With the error logging code you created in the previous 
chapter, you are notified whenever an error occurs, enabling you to proactively l<eep an eye 
on your server, fixing errors before they get a chance to happen again. 

>• If you are using themes in your site, mal<e sure you remove the styiesheetTheme attribute 
from the <pages> element in web.config. The Planet Wrox website uses themes, but you 
added the styiesheetTheme attribute to enable design-time support in Visual Studio. 0 n 
your production server, all you need is this; 

<pages theme =" Monochrome "> 

</pages> 

This way, the page won't include the same style sheet twice. 


WHAT'S NEXT 

N ow that you have finished your first ASP.N ET website, I am sure you are looking forward to creat- 
ing your next site. The Planet Wrox site can serve as a basis for new sites you will build. You prob- 
ably won't use any of its pages in your site directly, but hopefully this book and the Planet Wrox 
website inspired you enough to build a new website on your own. 

Because this book is aimed at beginners, I haven't been able to provide you with a lot of in-depth 
information on some important topics. M ost subjects that have their own chapter in this book eas- 
ily warrant an entire book on their own. For example, topics like CSS, AJAX , and LIN Q are so 
extensive that Wrox has published many books about them. N ow that you've mastered the basics of 
these technologies, you can dig deeper into them using the following books in the Wrox Professional 
series: 

>■ Professional CSS: Cascading Style Sheets for Web Design, 3rd Edition (ISBN : 
978-0-470-89152-0) 

>- Professional ASP.N ET 2.0 Design: CSS, Themes, and Master Pages (ISBN : 
978-0-470-12448-2) 


> Professional ASP.N ET 4.5 in C#and VB (ISBN : 978-1-118-31182-0) 
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Professional LIN Q (ISBN : 978-0-470-04181-9) 
>■ Professional M icrosoft IIS 8 (ISBN : 978-1-118-38804-4) 

Of course, tiie web isaiso a good place for more information. The following URLs may be helpful 
in your search for more information about ASP.N ET and its related technologies: 

> http://p2p.wrox.com — The public discussion forum from Wrox where you can go for all 
your programming-related questions. This bool< has its own category on that site, enabling 
you to asl< targeted questions. I am a frequent visitor to these forums and I'll do my best to 
answer each question you may have about this bool<. 

^ http://imar.spaanjaars.com — M y own website where I keep you up to date about vari- 
ous web programming-related topics. 

^ http://www.asp.net — The M icrosoft community site for ASP.N ET technology. Go here 
for news on ASP.N ET, additional downloads, and tutorials. 

^ http : / /msdn . microsoft . com/asp . net — Theofficial homeforASP.NET at the M icrosoft 
developers website that gives you a wealth of information on ASP.N ET. 


SUMMARY 

Obviously, deployment is an important action at the end of the development cycle of your new 
website. H owever, it's unlil<ely that you deploy your site only once. As soon as you release the first 
version of your site, you'll thinl< of other new and cool features you want to add, mal<ing the devel- 
opment of your site a continuous process. To accommodate for this, you need to make your site easy 
to deploy. 

0 ne way to do this is by moving hard-coded configuration settings to theweb.conf ig file, giv- 
ing you a single location to change parameters for the site in your development and production 
environments. 

W hen you're ready to roll out your site, it's a good idea to create a copy of your site and clean that 
up before you send the files to your target server. Copying and then publishing a site is a breeze with 
the Copy Web Site and Publish Web Site commands. 

Because you will deploy your site against IIS, you need to understand some important settings of 
this web server. In this chapter, you saw how to configure the Default Web Site and make some con- 
figuration changes. Because of the way security works in Windows and IIS, you also need to config- 
ure your hard drive so that the accounts used by theweb server can read thefilesin your site, and 
write to specific folders such as App_Data and cigpics. 


EXERCISES 


This chapter has no exercises, because the Planet Wrox site is now completely finished. H owever, 
your biggest challenge starts now: building websites with the knowledge you gained from this book. 
If you ever build a site with the information from this book and want to share it with me, please 
contact me through my website at http://imar.spaanjaars.com. H avefun! 
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► WHAT YOU LEARNED IN THIS CHAPTER 


.NET assembly 

A file with a . dll extension that contains executable and call- 


ahlp NFT mrip 

Application pool 

A mechanism to isolate (one or more) websites in IIS to give 


them their own set of resources 

Deployment 

The process of releasing a website from your development 


environment to the production environment 

Expression syntax 

A technique that enables you to bind control properties to 


different resources, such as application settings defined in 


Web . conf ig 

IIS 

Internet Information Services — Microsoft's web server for the 


Windows platform 

Integrated Pipeline mode 

With Integrated Pipeline mode turned on for an application 


pool in IIS, ASP.NET and IIS are tightly integrated together. 


enabling you to use ASP.NET techniques for non-.NET 


resources such as static files 

Precompilation 

The process of compiling a web application into a set of .dll 


files, which can be deployed to a production server; without 


precompilation, the ASP.NET files are compiled on the fly the 


first time they are requested 


webConf igurationManager class A .NET Framework class that provides access to data that is 

stored in configuration files 



Exercise Answers 


CHAPTER 1 
Exercise 1 Solution 

The markup of a pagein Visual Studio contains tlie raw and unprocessed source for tlie page, 
including the H TM L, ASP.N ET Server Controls, and programming code. The web server then 
processes the page and sends out the final H TM L to the browser. In the browser this H TM L 
is then used to render the user interface. 

Exercise 2 Solution 

The easiest way to store HTML fragments that you use often is to select them in the 
Document Window and then drag them to a free space on theToolbox. W hen the item is 
added, you can rename it to a more meaningful name. N ow you can simply double-click an 
item or drag it from theToolbox into your page whenever you need it. 

Exercise 3 Solution 

You have a number of ways to reset part of the customization changes you may have made, 
including: 

>■ Resetting the window layout by choosing Window o Reset Window Layout. 

>■ Resetting theToolbox by right-clicking it and choosing Reset Toolbox. 

>■ Resetting all settings of Visual Studio using Tools o Settings o Import and Export 
Settings or Tools o Import and Export Settings, depending on your version of Visual 
Studio. 
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Exercise 4 Solution 

To change the property of a control on a page, you can click the control in Design or M arl<up View 
and then use the Properties Grid (which you can bring up by pressing F4) to change the value of the 
property. Alternatively, you can change the property directly in M arkup View. 


CHAPTER 2 
Exercise 1 Solution 

A number of files fall in the Web Files category, including .aspx files (Web Forms that end up 
as pages in the web browser), .htmi files (that contain static HTML for your site), .ess files (that 
contain cascading stylesheet information), and .config files (that contain configuration informa- 
tion for the website). Refer to the table with the different file types in Chapter 2 for a complete list 
of files. 

Exercise 2 Solution 

When you want to makea pieceof text both bold and italicized, you need to select the text and then 
click the Bold button on the Formatting toolbar. Next you need to click theltalic button. The final 
HTML codein the page should look likethis: 

<strong><em>Welcome to Planet Wrox</em></strong> 

You may also come across <b> and <i> elements, which have the same effect. H owever, these are 
now considered outdated and you're encouraged to use <strong> and <em> instead. 

Exercise 3 Solution 

The first way is using the Solution Explorer. Right-click your site, choose Add o Existing Item, and 
then browse for theitem(s) you want to add. 

Secondly, you can drag and drop files from File Explorer or Windows Explorer or from your 
desktop directly into a VS website. Asa third alternative, you could put the files directly in the 
site'sfolder using Windows Explorer. For example, files you add to the folder c:\BegASPNET\site 
become part of your website automatically. If you don't seethe new files appear in VS directly, click 
the Refresh icon on the Solution Explorer toolbar. 

Exercise 4 Solution 

in VS, you have three different views on your code: Design View, M arkup View (also referred to as 
SourceView or CodeView), and Split View. The first gives you an impression of how your web page 
is going to look in the browser, and the second view shows you the raw markup. Split View enables 
you to see both views at the same time. VSalso has different views for other files. For example, 
programming code for an ASPX page is generally referred to as the Code Behind view or simply the 
Code Behind. 
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CHAPTER 3 
Exercise 1 Solution 

The biggest benefit of an external style sheet is the fact that it can be applied to the entire site. 
Simply by changing a single rule in that file, you can influence all pages in your site that make use 
of that rule. With embedded or inline styles, you need to change all the files in your site manually. 
External style sheets also make it much easier to reuse a certain style with many different elements 
in your site. Simply create a Class or an ID selector and reuse that wherever you see fit. 

Exercise 2 Solution 

Therulecan look likethis: 

hi 
{ 

font-family: Arial; 
color: Blue; 
font-size: 18px; 
border-top: Ipx solid Blue; 
border-left: Ipx solid Blue; 

} 

N ote another shorthand version of the border property. This one looks similar to the border prop- 
erty you saw earlier in this chapter that enabled you to set the size, style, and color of the border at 
once. In this rule, border-top and border-ieft are used to change the left and top borders only; 
the other two directions, the bottom border and right border, are not affected by this rule. 

Exercise 3 Solution 

The second declaration is more reusable in your site because it denotes a Class selector as opposed to 
an ID selector. The latter can only be used once in a single page by an element that has a matching 
id attribute: Maincontent in this example. The CI ass selector BoxwithBorders, on the other hand, 
can be used by multiple elements in a single page, because you are allowed to apply an identical class 
attribute to multiple elements in a page. 

Exercise 4 Solution 

VS lets you attach a stylesheet in the following ways: 

>• Type in the required <iink> element in the <head> of the page in M arkup View directly. 

Drag a CSS file from the Solution Explorer into the <head> section of a page in M arkup 
View. 

>- Drag a CSS filefrom the Solution Explorer and drop it onto the page in Design View. 
>- Use the main menu FormatoAttach StyleSheet and then browse to your CSS file. 
> UsetheM anage Styles or Apply Styles windows and click theAttach StyleSheet link. 
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CHAPTER 4 
Exercise 1 Solution 

The mechanism that enables controls to maintain their state is called View State. 

Exercise 2 Solution 

TheASP.N ET run time stores the values for the controls in a hidden field called viewstate. This 

hidden field is sent with each postbacl< to the server, where it's unpacl<ed and then used to repopu- 
latethecontrols in thepagewith their previous values. 

Exercise 3 Solution 

TheDropDownList Only allows a user to mal<e a single selection whereas theListeox allows for 
multiple selections. In addition, theDropDownList only shows one item in the list when it's not 
expanded, while the Listeox is capable of displaying multiple items simultaneously. 

Exercise 4 Solution 

in order to have a checkBox control submit bacl< to the server when you select or clear it in the 
browser, you need to set the AutoPostBack property to True: 

<asp : CheckBox ID="CheckBoxl" runat=" server" AutoPostBack="True" /> 

Exercise 5 Solution 

M any of the ASP.N ET Server Controls let you change colors using properties like Backcoior and 
Forecoior. Additionally, you can useBordercoior, Borderstyie, and Borderwidth to Change the 
border around a control in the browser. Finally, to affect the size of the control, you need to set its 
Height and Width properties. 

Exercise 6 Solution 

instead of setting individual styles, you're much better off setting the cssciass property that points 
to a ruleset. Thisway, your pages becomeeasier to maintain, as style-related information isstored 
in a singleplace: in the style sheet. At the sametime, your page loads faster as not all the style infor- 
mation is sent for each control on each request. Instead, the browser reads in the style sheet once 
and keeps a locally cached copy. 


CHAPTER 5 
Exercise 1 Solution 

Both the Byte and the sByte data types are designed to hold small, numeric values. Both of them 
take up exactly the same amount of computer memory, so you're probably best off using the Byte 
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data type. Because it doesn't allow you to store negative numbers, It's clear from the start that It can 
only contain a number between o and 255. H owever, It's much better not to store someone's age, but 
the date of birth Instead. That way, you can always extract the age from the date of birth by com- 
paring It with today's date. Because the date of birth Is a fixed point In time. It will always reflect 
someone's age correctly without the need to annually update It. 

Exercise 2 Solution 

This piece of code toggles the visibility of theDeieteButton control. It uses both the assignment 
operator and the negation operator. First, the negation operator Is applied to the current value of 
Visible. W hen that value Is currently True, the Not {>. In C#) operator turns It Into False and vice 
versa. This result Is then assigned back to the visible property. So, where the button was previ- 
ously hidden. It Is now visible. W here It was visible before. It's now made Invisible. 

Exercise 3 Solution 

To create a specialized version of person, you need to create a second class that Inherits the person 
class and extend Its behavior by adding the studentid property. 

VB.NET 

Public Class Student 
Inherits Person 
Public Property Studentid As String 
End Class 

C# 

public class Student : Person 
{ 

public string Studentid { get; set; } 

} 

CHAPTER 6 
Exercise 1 Solution 

The contentpiaceHoider element should be placed In the master page. It defines a region that 
content pages can fill In. The content control should be placed In a content page that Is based on 
the master page. It Is used to supply the content for the contentPiaceHoider element that It Is con- 
nected to. 

Exercise 2 Solution 

To link a content control to Its contentpiaceHoider Ih the master page, you need to set the 

ContentPiaceHoider id: 

<asp: Content ID=" Content 1" Content PlaceHolderID="IdOf ContentPiaceHoider" 
runat=" Server" > 

</asp : Content> 
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Exercise 3 Solution 

You have a few ways to do this. First, you can create a named sl<in with a different CSS class in the 
same sl<in file: 

<asp:Button runat=" server" SkinID="RedButton" CssClass="RedButton" /> 

You then hool< up the control you want to change to this named skin using the skiniD attribute: 

<asp: Button ID="Buttonl" runat= " server " Text= "Button" SkinID= "RedButton" /> 

Alternatively, you can disable theming on the Button control and give it a different CSS class 
directly in the A SPX page: 

<asp: Button ID="Buttonl" runat= " server " EnableTheming=" False" 
CssClass="RedButton" Text="Button" /> 

I n both solutions, you need a C SS class that sets the background color: 

.RedButton 
{ 

background- color : Red; 

} 

Exercise 4 Solution 

A styiesheetTheme isapplied early in the page's life cycle. This gives controls in theASPX page the 
opportunity to override settings they initially got from the styiesheetTheme. This means that the 
StyiesheetTheme just suggests the look and feel of controls, giving the individual controls the abil- 
ity to override that look. 

A Theme, on the Other hand, overrides any settings applied by the controls. This enables you as a 
page developer to enforce the look and feel of controls in your site with the settings from the theme. 
If you still need to change individual controls, you can disabletheming by setting EnabieTheming to 

False. 

Exercise 5 Solution 

You have three ways to set the Theme property in an ASP.N ET website. The first option isto set the 
property directly in the® Page directive so it applies to that page only: 

<%@ Page Language="C#" Theme = "Monochrome" %> 

To apply a theme to all pages in your site, you set the theme attribute of the <pages> element in the 

Web . conf ig file: 

<pages theme= "Monochrome" . . . 

The final option you have is to set the theme programmatically. You have to do this in thepremit 
event of the page class, which you can handle in individual pages in your site or at a central location 
using the BasePage class as you did in Chapter 6. 
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Exercise 6 Solution 

A base page enables you to centralize behavior for all the pages in your site. Instead of recoding the 
same functionality over and over again in every page, you move this code to the base page so all 
ASPX pages can use it. When you implement the theme switcher, all you have to do is write some 
code in the central BasePage class. All pages in your site that inherit from this BasePage class then 
automatically set the selected theme, without the need for any additional code. 


CHAPTER 7 
Exercise 1 Solution 

To change the background color of items in theTreeview control you can usetheNodestyie ele- 
ment as follows: 

<asp : TreeView ID="TreeViewl" runat="server" 

DataSourceID= "SiteMapDataSourcel " ShowExpandCollapse= " False " > 
<NodeStyle BackColor= "White" /> 

</asp : TreeView> 

Instead of setting theBackcoior property (which results in an inline style), you're better off setting 
thecssciass property: 

<NodeStyle CssClass="TreeViewNodeStyle" /> 

You then need to create a separate class in your CSS file: 

. TreeViewNodeStyle 
{ 

background- color : White; 

} 

This way, it's easier to manage the styling from a central location. 

Exercise 2 Solution 

To redirecta user to another page programmatically, you can use Response. Redirect, Response 
. RedirectPermanent, and Server . Transfer. The first two options send a redirect instruction to 
the browser and are thus considered client-side redirects, server .Transfer, on theother hand, takes 
place at the server, enabling you to serve a different page without affecting the user's address bar. 

Exercise 3 Solution 

To display a TreeView that doesn't have the ability to expand or collapse nodes, you need to set its 

ShowExpandCollapse property tO False. 
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CHAPTER 8 
Exercise 1 Solution 

A standard property uses a normal backing variable to store its value, whereas a View State prop- 
erty uses the viewstate Collection for this. A normal property is reset on each postback, whereas a 
View State property isableto maintain its value. This advantage of the View State property comes 
at a cost, however. Storing the value in View State adds to the size of the page, both during the 
request and the response. A normal property doesn't have this disadvantage. You should carefully 
consider what you store in View State to minimize the page size. 

Exercise 2 Solution 

To make the property maintain its state across postbacks, you need to turn it into a View State 
property. The required code is almost identical to that of theNavigateuri, but it uses the 
Direction data type instead of a string. You need to remove the automatic property and replace it 
with the following code; 

VB.NET 

Public Property DisplayDirectionO As Direction 
Get 

Dim _ displayDirection As Object = ViewState {"DisplayDirection") 
If _ displayDirection IsNot Nothing Then 

Return CType {_ displayDirection, Direction) 
Else 

Return Direction. Horizontal ' Not found in View State; return a default value 
End If 
End Get 

Set (Value As Direction) 

ViewStateC'DisplayDirection") = Value 
End Set 
End Property 

C# 

public Direction DisplayDirection 
{ 

get 
{ 

object displayDirection = ViewState ["DisplayDirection"] ; 

if (_ displayDirection != null) 

{ 

return (Direction) _ displayDirection; 

} 

else 
{ 

return Direction. Horizontal; // Not found in View State; 

// return a default value 

} 

} 

set 
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{ 

ViewState ["DisplayDirection"] = value; 

} 

} 

Exercise 3 Solution 

Using a custom data type like the Direction enumeration has two benefits over using numeric or 
string data types. Because of the way Intel I i Sense helps you select the right item, you don't have to 
memorize magic numbers or strings lil<e o or i. Additionally, the compiler helps you check the spell- 
ing, so if you type Direction, vrticai instead of Direction. Vertical, you get ah error at devel- 
opment time. 


CHAPTER 9 
Exercise 1 Solution 

First, you need to write a property in the Code Behind of the user control, similar to the 
DisplayDirection property you Created in the previous chapter for the Banner control. This prop- 
erty could look like this: 

VB.NET 

Public Property PageDescription As String 
C# 

public string PageDescription { get; set; } 

You then need to modify the control declaration. For example, in contact .aspx, you can modify 
the control like this: 

<ucl : ContactForm ID="ContactForm" runat="server" 
PageDescript ion= " Contact Page " / > 

N otethat the PageDescription property cohtaihs a short description of the containing page. 

Obviously, you can put whatever text you see fit in the property to describe the page. Finally, you 
need to add the PageDescription to thesubject or body of the e-mail message. The following code 
snippet shows you how to extend thesubject with the value of this new property: 

VB.NET 

myMessage. Subject = "Response from web site. Page: " & PageDescription 

myMessage . From = New MailAddress ( "you@example . com" , "Sender Name") 

C# 

myMessage. Subject = "Response from web site. Page: " + PageDescription; 

myMessage . From = new MailAddress ( "youOexample . com" , "Sender Name"); 

From now on, this custom page description is added to the subject of the mail message. This solu- 
tion becomes particularly useful if you have multiple Web Forms using this contact form and you 
want to find out which page was used to send the information. 
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Exercise 2 Solution 

If you don't inspect the isvaiid property, your system is vulnerableto invalid data. Users can dis- 
able] avaScript in their browsers and submit invalid data directly into your page. By checl<ing the 
isvaiid property you can tell whether or not it's safe to continue with the submitted data. 

Exercise 3 Solution 

The From property of theMaiiMessage class is of typeMaiiAddress, meaning that you can directly 
assign a single instance of this class to it. Because you can potentially have more than one recipient, 
the To property isa collection of MaiiAddress objects, and so you need to use its Add method to 

add instances of MaiiAddress to it. 

Exercise 4 Solution 

To call a client-side validation function, you need to set the ciientvaiidationFunction property 

of the CustomValidator lil<e this: 

<asp : CustomValidator ID="CustomValidatorl" runat=" server" 

ClientValidationFunction="f unctionName" >*</asp : CustomValidator> 

The client function that you need to add to the marl<up of the page must have the following 
signature: 

function f unctionName (source, args) 
{ ••• } 

The source argument contains a reference to the actual customvaiidator control in the client-side 
HTML code. The args argument provides context information about the data and enables you to 
indicate whether or not the data isvaiid. The names of the arguments don't have to be source and 
args; however, when using these names, the client-side function looks as close to its server-side 
counterpart as possible. Another common naming scheme, used for almost all other event handlers 
in ASP.N ET, is to use sender and e, respectively. 

Exercise 5 Solution 

To tell the validation mechanism whether the data you checl<ed is valid, you set the isvaiid prop- 
erty of the args argument in your custom validation method. Thisappliesto both client- and server- 
side code. The following snippet shows how this is done in the client-side validation method for the 

ContactForm. ascx COntrol: 

if (phoneHotne .value != '' || phoneBusiness .value != '') 
{ 

args . IsValid = true; 

} 

else 
{ 

args . IsValid = false; 

} 
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CHAPTER 10 
Exercise 1 Solution 

The scriptManager cohtrol is a required component in almost all Ajax-related operations. It takes 
care of registering client-sideJavaScript files, handles interaction with web services defined in your 
website, and it's responsible for the partial page updates. You usually place the scriptManager 
directly in a content page if you thinl< you need Ajax capabilities on only a handful of pages. 
H owever, you can also place the scriptManager in a master page so it becomes available through- 
out the entire site. 

W hen you have the scriptManager i n the master page you can use the ScriptManagerProxy to 

register individual web services or script files on content pages. Because you can have only one 
ScriptManager in a page, you Can't add another one in a content page that uses your master page 
with the ScriptManager. T he ScriptManagerProxy serves as a bridge between the Content page 
and the scriptManager, giving you great flexibility as to where you register your services. 

Exercise 2 Solution 

You can let your users know a partial page update is in progress by adding an updateprogress con- 
trol to the page. You connect this control to an UpdatePanel using its AssociatedUpdatePanellO. 

Inside the <progressTempiate> you define whatever markup you see fit to inform your user 
an update is in progress. A typical <progressTempiate> contains an animated icon, some text, 
or both. 

Exercise 3 Solution 

To createa script-callable service, you first need to add an AJAX-enabled WCF servicefileto 
your site using the Add N ew Item dialog box. The class file that is created for you already has the 

ServiceContract and AspNetCompatibilityRequirements attributes applied. 
VB.NET 

<ServiceContract (Namespace :="")> 
<AspNetCompatibilityRequirements ( 

RequirementsMode : =AspNetCompatibilityRequirementsMode .Allowed) > 
Public Class NameOfYourService 

C# 

[ServiceContract (Namespace = "")] 
[AspNetCompatibilityRequirements ( 

RequirementsMode = AspNetCompatibilityRequirementsMode .Allowed) ] 

public class NameOfYourService 

You then need to decorate each method within this class that you want exposed as a web method 

with theOperationContract attribute: 
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VB.NET 

<OperationContract ( ) > 

Public Function NameOfYourMethod {parameters) As DataType 
C# 

[OperationContract] 

public DataType NameOfYourMethod (parameters) 

Once you've registered the WCF service in a scriptManager or scriptManagerProxy control, you 
can call the service as follows from your client-side JavaScript: 

NameOf YourService . NameOfYourMethod { 

parameters , successCallback, errorCallback) ; 

Exercise 4 Solution 

To expose and use a page method you need to carry out the following steps: 

1. Set EnablePageMethods On the ScriptManager tO True. 

2. Definea static (shared in VB.N ET) method in your page and apply thewebMethod attri- 
bute lil<e this: 

VB.NET 

<WebMethod ( ) > 

Public Shared Function NameOf YourMethod (parameters) As DataType 

End Function 
C# 

[WebMethod] 

public static DataType NameOf YourMethod [parameters) { ... } 

3. You call the method in JavaScript through the pageMethods object and define a callbacl< 
method to handle the result of the method: 

PageMethods .WameOf YourMethod {parameters, successCallback, errorCallback) ; 

CHAPTER 11 
Exercise 1 Solution 

To accomplish this, you first need to set the ClientlDMode of VertlcalPanel to static in the 

markup of Banner . ascx. This mal<es it easier to worl< with the client IDs of the controls inside the 
panel: 

<asp: Panel ID="VerticalPanel" runat=" server" ClientIDMode=" Static "> 

Then you need to add a <span> element just below verticaipanei with the text H ide Banner. The 
style attribute changes the mouse cursor into a hand so users understand the text is clicl<able when 
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they hover over it. You need to add a runat attribute and a server-side ID so you can hide the linl< 
in the Code Behind. You also need to give it a class attribute so you can find the element using 
jQ uery. You should end up with this span element: 

<span id="HideBanner " style="cursor : pointer;" runat="server" 
class="HideBanner">Hide Banner</span> 

In a script block below the last panel, you need to add the following code: 

<script type="text/javascript"> 
$ (function () 
{ 

$(' .HideBanner ') .bind (' click ' , function {) 
{ 

$ ( ' #VerticalPanel ' ) . slideToggle ( ' f ast ' , function () 
{ 

if ($ (this) .CSS { 'display' ) == 'block') 
{ 

$ ( ' . HideBanner ' ) . text { ' Hide Banner ' ) ; 

} 

else 
{ 

$ ( ' . HideBanner ' ) . text { ' Show Banner ' ) ; 

} 

}); 
}); 
}); 

</ script> 

This code dynamically binds some code to the click event of the <span> element found by 
using $ ( ' .HideBanner' ) . Then inside the handler for the clicl<, the code finds the whole panel 
(#verticaipanei) and calls slideToggle, which hides items in the matched set when they 
are visible and shows them when they aren't. The if check then uses the ess method on the 
verticaipanei element (now referred to with the this keyword) and asks for its display property. 
W hen it is block it means the banner is visible, and thus the text must be H ide Banner. Otherwise, 
the text is set to Show Banner. Finally, you need to hide the link when the banner is in horizontal 
mode in the banner control's Code Behind: 

VB.NET 

Case Direction . Horizontal 

HorizontalPanel .Visible = True 
VerticalPanel .Visible = False 
HorizontalLink.HRef = NavigateUrl 
HideBanner .Visible = False 

C# 

case Direction . Horizontal : 

HorizontalPanel .Visible = true; 
VerticalPanel .Visible = false; 
HorizontalLink.HRef = NavigateUrl; 
HideBanner .Visible = false; 
break; 
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Exercise 2 Solution 

The siideup method hides elements by slowly decreasing their height. siideDown shows hidden ele- 
ments instead by doing the reverse: slowly increasing the height of an element until it's fully visible. 
Both methods accept, among other arguments, a speed parameter that either accepts a fixed value 
(slow, normal, or fast) or a number specifying the speed of the animation in milliseconds. 

Exercise 3 Solution 

jQuery's document ready function fires when the page is finished loading in the browser, only dur- 
ing the initial request. ThepageLoad method fires both when the page first loads and after an asyn- 
chronous postback, for example, when using an updatePanei. This difference enables you to choose 
the desired behavior. N eed to fire some code on initial load and after a postbacl<? Choose pageLoad. 
Otherwise, choose jQuery's document ready function. 

Exercise 4 Solution 

You use the special _references. js fllein the Scripts folder to enable IntelliSense. VS will read 
this file and parse all JavaScript files that you added with this syntax: 

/// <reference path=" Path/ To/ File . j s" /> 

This way, you get IntelliSense in files where it would otherwise not be supported (such as user con- 
trols) or for JavaScript files that you're not directly linl<ing to in your website. 


CHAPTER 12 
Exercise 1 Solution 

The DELETE statement fails because there is a relationship between the id of the Genre table and the 
Genreid of the Review table. As long as this relationship is in effect, you cannot delete genres that 
still have reviews attached to them. To beableto delete the requested genre, you need to delete the 
associated reviews first, or assign them to a different genre using an update statement. Exercise 4 
shows you how you can accomplish this. 

Exercise 2 Solution 

The relationship between the Genre and Review tables is a one-way relationship. The relationship 
enforces that the cenreid assigned to a review must exist as an id in the Genre table. At the same 
time, it blocks you from deleting genres that have reviews attached to them. H owever, the relation- 
ship doesn't stop you from deleting rows from the Review table. 

Exercise 3 Solution 

To delete reviews with an id of 100 or less, you need the following SQL statement: 

DELETE FROM Review WHERE Id <= 100 
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Exercise 4 Solution 

Before you can delete the genre, you need to reassign the existing reviewsto a new genre first. You 
can do this with the following update statement: 

UPDATE Review SET Genreld = 11 WHERE Genreld = 4 

This assigns thecenreid of 11 to all reviews that previously had their Genreid set to 4. This in 
turn means that the genre with an id of 4 no longer has any reviews attached to it, so you can now 
remove it with the following SQL statement: 

DELETE FROM Genre WHERE Id = 4 

Exercise 5 Solution 

To update the name you need to execute an update statement. To limit the number of affected 
rows to just the Rocl< genre, you need to use a where clause. You can use the where clause to filter 
the rows based on the genre's id or on its Name. The following SQL statements are functionally 
equivalent: 

UPDATE Genre SET Name = 'Punk Rock' WHERE Id = 7 
UPDATE Genre SET Name = ' Punk Rock ' WHERE Name = ' Rock ' 

This code assumes that the current Rocl< genre has an id of i. 


CHAPTER 13 
Exercise 1 Solution 

The best control for this scenario is thecridview control. It's easy to set up and has built-in support 
for paging, updating, and deleting of data. Together with a Detaiisview control you can offer your 
users all four CRUD operations. To connect to your database you need to use a sqiDatasource 
control. Chapter 14 provides you with alternatives for both thecridviewand the sqiDataSource. 

Exercise 2 Solution 

For a simple, unordered list, you're probably best off using a Repeater control hooked up to a 
SqiDataSource control. The biggest benefit of the Repeater control is that it emits no H TM L code 
of its own, enabling you to control the final markup. A downside of the control is that it doesn't sup- 
port editing or deletion of data, which isn't a problem if all you need to do is present the data in a 
list. Chapter 14 shows you how to use the Repeater control. 

Exercise 3 Solution 

A BoundFieid is directly tied to a column in your data source and offers only limited ways to cus- 
tomize its appearance. The TempiateFieid, on the other hand, gives you full control over the way 
the field is rendered. As such, it's an ideal field for more complex scenarios— for example, when you 
want to add validation controls to the page, or if you want to let the user work with a different con- 
trol, like a DropDownList instead of the default lexteox. 
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Exercise 4 Solution 

You should always store your connection strings in the web.config file. This file has an element 
called <connectionstrings> that is designed specifically for storing connection strings. By storing 
them in web.config, you mal<e it very easy to find your connection strings and modify them. If you 
store them at the page level, you have to search through your entire project for the relevant connec- 
tion strings. 

You can access the connection strings using expression binding syntax. For example, to set the con- 
nection string in a sqioatasource, you can use code 11 l<e this: 

ConnectionString="<%$ ConnectionStrings : PlanetWroxConnectionStringl %>" 

For this code to worl<, you need a connection string similar to this in your web.config file; 

<connectionStrings> 

<add name=" PlanetWroxConnectionStringl" connectionString="Data 

Source= (localdb) \vll . 0 ;AttachDbFilename= | DataDirectory | \ Plane tWrox.mdf ; 

Integrated Security=True" 
providerName=" System. Data . SqlClient " / > 
</ connect ionStrings> 


CHAPTER 14 
Exercise 1 Solution 

To get the 10 most recent reviews from the system, your query needs two important LIN Q con- 
structs: first, it needs an order By (orderby in C #) clauseto order the list in descending order. It 
then needs the Take method to tal<e the first 10 reviews from that result set: 

VB.NET 

Using myEntities As New PlanetWroxEntities ( ) 
Dim recentReviews = ( 

From myReview In myEntities . Reviews 

Order By myReview. CreateDateTime Descending 

Select New With { 

myReview. Title, myReview. Genre .Name 

} 

) .Take (10) 
GridViewl .DataSource = recentReviews 
GridViewl . DataBind { ) 
End Using 

C# 

using (PlanetWroxEntities myEntities = new PlanetWroxEntities () ) 
{ 

var recentReviews = (from myReview in myEntities. Reviews 

orderby myReview. CreateDateTime descending 

select new { myReview. Title, myReview. Genre .Name }) .Take (10) ; 
GridViewl. DataSource = recentReviews: 
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GridViewl.DataBindO ; 

} 

This code also uses the New keyword (new in C#) to create a new, anonymous type that contains 
oniy the review's titie and the genre's name. 

Exercise 2 Solution 

T he biggest benefit of the Listview controi is that it combines the strengths of those other data 
controls. Just lil<etheGridview control, the Listview control makes it easy to display data in a 
grid format that users can edit from within the grid. Additionally, the Listview control enables you 
to insert new rows, behavior that is found in controls like Detaiisview and Formview but not in 

GridView. 

Finally, the Listview control gives you full control over the markup that gets sent to the browser, 
an important feature that only the Repeater control gives you out of the box. 

Exercise 3 Solution 

First you would need to change the Default .aspx page in the photoAibums folder so it links 
each thumbnail to a details page and passes the ID of the picture to this new page. In the 

<ItemTemplate> Of the Listview COntrol in Default . aspx, add this HyperLink COntrol arOUnd the 

Image control that was already there: 

<asp: HyperLink ID="HyperLinkl" runat="server" 

NavigateUrl= ' <%# "PictureDetails .aspx?Id=" + Item. Id.ToString () %>■> 

<asp:Image ID="Imagel" runat=" server" ImageUrl= ' <%# Item. ImageUrl %>' 

ToolTip='<%# Item.ToolTip %>' /> 
</asp : HyperLink> 

N Otethat theNavigateUrl iS built Up from the static text PictureDetails.aspx?Id=and the ID 

of the picture in the database. 

Then create a new page called pictureDetaiis .aspx and add an image control in the markup: 

<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" runat="server "> 

<asp:Image ID="Imagel" runat="server" /> 
</asp:Content> 

Finally, you need to execute the following LIN Q query in the Load event of the page in the Code 
Behind to set the imageuri: 

VB.NET 

Protected Sub Page_Load( sender As Object, e As EventArgs) Handles Me. Load 
Dim pictureld As Integer = Convert . ToInt32 (Request . QueryString .Get (" Id" ) ) 
Using myEntities As New PlanetWroxEntities { ) 

Dim imageUrl As String = (From picture In myEntities . Pictures 

Where picture. Id = pictureld 
Select picture) .Singled .ImageUrl 
Image 1 . ImageUrl = imageUrl 
End Using 
End Sub 
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C# 

protected void Page_Load (object sender, EventArgs e) 
{ 

int pictureld = Convert . ToInt32 (Request . QueryString . Get (" Id" )) ; 
using (PlanetWroxEntities myEntities = new PlanetWroxEntities ( ) ) 
{ 

string imageUrl = (from picture in myEntities . Pictures 

where picture. Id == pictureld 

select picture) . Single () .ImageUrl; 
Imagel . ImageUrl = imageUrl; 

} 

} 

This code gets the ID of the picture from the query string first and then feeds it to the LIN Q query. 

The Single method is used to retrieve a single picture from the picture table whose imageuri is 
then used to display the image in the browser. 

Exercise 4 Solution 

The best location to delete the image from disk isin the Entityoatasource control's Deleted event 
that fires after the item has been deleted from the database. Inside a handler for this event you get 
a reference to the picture that has been deleted, find its imageuri, convert the U RL to a physical 
location, and delete the image. To implement this, follow these steps: 

1. Open ManagePhotoAibum.aspx from the root of the site in DesignView, select the 
EntityDatasource control. Open its Properties G rid, and switch to the Events tab. 

2. Double-click the Deleted event and in Code Behind add the following code to the handler 
that VS added for you: 

VB.NET 

Dim myPicture As Picture = CType (e . Entity, Picture) 

Dim fileName As String = Server .MapPath (myPicture . ImageUrl) 

System. 10. File .Delete (fileName) 

C# 

Picture myPicture = e. Entity as Picture; 

string fileName = Server .MapPath (myPicture . ImageUrl) ; 

System. 10 . File .Delete (fileName) ; 

3. Add ImageUrl tO the list Of DataKeyNames Of the ListView COntrol: 
<asp : ListView ID="ListViewl" ... DataKeyNames=" Id, ImageUrl" ...> 

This code first finds a reference to the picture using e. Entity. Itthen grabs its virtual imageuri, 
converts it to a physical path, and then uses the oeiete method of the File class to get rid of the 
fileon disk. Because the entire image is constructed from View Stateand not requested from EF, 
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you need to store the imageuri in theDataKeyNames property. This adds it to View State so it 
roundtrips to the browser and is avaiiabie in the Deleted event. 

Exercise 5 Solution 

To dispiay oniy genres that have at ieast one review, aii you need to do isfiiter out empty genres 
using Where With a Count method iii<ethis: 

VB.NET 

Dim genresWithReviews 
C# 

var genresWithReviews 

CHAPTER 15 
Exercise 1 Solution 

The Load event of the Page aiways fires before user-triggered events sucli as a Button controi's 

Click. 

Exercise 2 Solution 

To preseiect the correct item in the drop-down iist after a user has inserted or edited a review, 
you need to mai<etwo modifications. First, you need to cliange the Redirect statement in the 
AddEditReviewHandcoded.aspx page SO it ihciudes the I D of the genre: 

VB.NET 

Response .Redirect (String. Format ( "Reviews . aspx?GenreId={ 0} " , 
GenreList . SelectedValue) ) 

C# 

Response .Redirect (string. Format { "Reviews . aspx?GenreId={ 0 } " , 
GenreList . SelectedValue) ) ; 

Using string. Format mai<es this code a bit easier to read as opposed to piain string concatenation 
using theampersand (&) in VB.N ET and the pius (+) in C#. 

If you now insert or edit a new review, you'ii see that the ID of the genre is passed baci< to the 
Reviews, aspx page. Oh that page, you can use that ID to preseiect the correct item in the 


= From genre In myEntities . Genres 
Order By genre. Name 
Where genre . Reviews . Count () > 0 
Select New With {genre. Name, genre .Reviews} 

= from genre in myEntities . Genres 
orderby genre. Name 
where genre . Reviews . Count () > 0 
select new { genre. Name, genre . Reviews } ; 
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DropDownList control, which you can accomplish with thefoiiowingcodein thepage_Load 
method: 

VB.NET 

Protected Sub Page_Load (sender As Object, e As EventArgs) Handles Me. Load 
If Not Page. IsPostBack Then 

Dim genreld As String = Request . QueryString . Get ( "Genreld" ) 
If Not String. IsNullOrEmpty (genreld) Then 
DropDownListl .DataBind ( ) 

Dim myltem As Listltem = DropDownListl . Items . FindByValue (genreld) 
If myltem IsNot Nothing Then 

myltem. Selected = True 
End If 
End If 
End If 
End Sub 

C# 

protected void Page_Load (object sender, EventArgs e) 
{ 

if (! Page . IsPostBack) 
{ 

string genreld = Request . QueryString . Get ( "Genreld" ) ; 

if (! string . IsNullOrEmpty (genreld) ) 

{ 

DropDownListl .DataBind ( ) ; 

Listltem myltem = DropDownListl . Items . FindByValue (genreld) ; 

if (myltem != null) 

{ 

myltem. Selected = true; 

} 

} 

} 

} 

Only when the page loads from a new request (and not from a postback) does this code fire. The 
code then tries to find a Genreid in the query string. If it can find it, it tries to find an item with that 
requested value in theoropoownList. Because the DropDownList control hasn't been data bound 
yet it doesn't contain any items. Therefore, you need to call DataBind o first. This gets the genres 
from the database using EF and puts them in theoropoownList. Once that's done and the item is 
found in the items collection, it's made the active item by setting its selected property to True/ 
true. The sqioatasource control watches this DropDownList SO When the data source gets its 
reviews, it does so for the correct genre. 

Exercise 3 Solution 

The various data-bound controls can raise exceptions that you can handle in their event handlers. 

Once you have dealt with the exception appropriately, you need to set the ExceptionHandied prop- 
erty of the e argument to True. The following code snippet shows how a Label control is updated 
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with an error message. ExceptionHandied is then set to stop the Exception from getting passed on 
into the user interface where it wouid otherwise resuit in a " Yeiiow Screen of Death." 

VB.NET 

Protected Sub SqlDataSourcel _ Deleted(sender As Object, 

e As SqlDataSourceStatusEventArgs) Handles SqlDataSourcel. Deleted 
If e. Exception IsNot Nothing Then 

ErrorMessage .Text = "We're sorry, but something went terribly wrong while " & 
"deleting your genre." 
e. ExceptionHandied = True 
End If 
End Sub 

C# 

protected void SqlDataSourcel _ Deleted(object sender, 
SqlDataSourceStatusEventArgs e) 

{ 

if (e. Exception != null) 
{ 

ErrorMessage .Text = ©"We're sorry, but something went terribly wrong while 

deleting your genre."; 
e. ExceptionHandied = true; 



CHAPTER 16 
Exercise 1 Solution 

A utiienti cation is all about proving your identity to a system lil<e a website. After you have been 
authenticated, authorization then determines what you can and cannot do in the system. 

Exercise 2 Solution 

To expand the access to the Management folder forjohn and all usersin theEditors role, you need to 
expand the current roies attribute to include Editors, and add an additional allow element with its 

users attribute set to John; 

<system.web> 

< author ization> 

<allow roles= "Managers, Editors" /> 
<allow users="John" /> 
<deny users="*" /> 
< /author ization> 
</ system. web> 

The roles attribute enables you to specify multiple roles separated by a comma. To grant the John 
account access, you need to add an additional aiiow element and then fill in John's name in the 
users attribute. 
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From a maintainability perspective, it wouid be a iot better to add Jolin to tlie M anagers or Editors 
roie if possible. H owever, you may end up giving J oiin more rigiits tiian you want (iiecouid tiien 
access anytiiing tliat a M anager or an Editor couid access). Generally, it's best to manage users 
through roles as much as possible, but it's good to l<now that you can grant individual accounts the 
necessary rights as well (or explicitly take those rights away using a deny element). 

Exercise 3 Solution 

if you want to redirect all users to the same page, all you need to set istheoestinationpageuri: 

<asp:Login ID="Loginl" runat=" server" DestinationPageUrl="~/MyProf ile . aspx" > 

When a user is logged in successfully, she's taken to Myprofiie.aspx automatically. 

Exercise 4 Solution 

The Loginstatus Simply displays a simple link that indicates whether or not the user is logged in. 
By default the text that is displayed is Login when the user is currently not logged in, and Logout 
when the user is already logged in. Clicking the link either sends the user to the default Login page, 
or logs the user out. 

The Loginview is somewhat similar in that it displays different content depending on whether the 
user is currently logged in. H owever, because the control is completely template driven, you can fully 
control the content that is displayed. To enable you to differentiate between different user roles, you 
can usetheRoieGroups element to set up templates that are shown only to users in specific roles. 


CHAPTER 17 
Exercise 1 Solution 

You would implement the favorite theme as a string property and call it FavoriteTheme. To ensure 
that you always have a valid theme, you could also set a default value. Finally, you should make the 
property accessible to anonymous users. Your final profile property could end up I ike this: 

<add name=" FavoriteTheme" def aultValue="Monochrome" allowAnonymous=" true" /> 

To support anonymous profiles, you need to explicitly enable them by adding an < anonymous i den - 
tification> element as a direct child of <systera.web> in the web. config file; 

<system.web> 

<anonymousIdeiitif ication enabled="true" cookieName="PlanetWroxAnonYmous" /> 

Exercise 2 Solution 

Given the syntax you saw in the question, you could now access the new property and use it to 
change the current theme i n the BasePage; 

VB.NET 

Private Sub Page_PreInit (sender As Object, e As EventArgs) _ 
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Handles Me.Prelnit 
Dim myProfile As Prof ileCommon = 

CType (HttpContext . Current . Profile, Prof ileCommon) 
If Not String . IsNullOrEmpty (myProfile . FavoriteTheme) Then 

Page. Theme = myProfile . FavoriteTheme 
End If 
End Sub 

C# 

private void BasePage_PreInit (object sender, EventArgs e) 
{ 

Prof ileCommon myProfile = (Prof ileCommon) HttpContext . Current . Prof ile ; 

if ( ! string . IsNullOrEmpty (myProfile . FavoriteTheme) ) 

{ 

Page. Theme = myProfile . FavoriteTheme; 

} 

} 

Exercise 3 Solution 

To finalize the theme selector using Profile, you also need to change the code in the master page 
Frontend. master. Instead of Storing the user-selected theme in a cool<ie, you should now store it in 
Profile. Change the code in page_Load as follows: 

VB.NET 

If Not Page . IsPostBack Then 

Dim selectedTheme As String = Page. Theme 

If Not String. IsNullOrEmpty (Profile. FavoriteTheme) Then 

selectedTheme = Prof ile . FavoriteTheme 
End If 

If Not String. IsNullOrEmpty(selectedTheme) Then 

Dim item As Listltem = ThemeList . Items . FindByValue (selectedTheme) 
If item IsNot Nothing Then 

item. Selected = True 
End If 
End If 
End If 

Select Case Page . Theme .ToLower ( ) 
C# 

if (! Page . IsPostBack) 
{ 

string selectedTheme = Page. Theme; 

if ( ! string. IsNullOrEmpty (Prof ile . FavoriteTheme) ) 

{ 

selectedTheme = Prof ile . FavoriteTheme; 

} 

if ( ! string . IsNullOrEmpty (selectedTheme) ) 
{ 

Listltem item = ThemeList . Items . FindByValue (selectedTheme) ; 

if (item != null) 

{ 

item. Selected = true; 
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} 

} 

} 

switch ( Page . Theme . ToLower ( ) ) 

You can then simplify the code in ThemeList_seiectedindexchanged in tlie master page to: 

VB.NET 

Protected Sub ThemeList_SelectedIndexChanged (sender As Object, 
e As EventArgs) Handles ThemeList . SelectedlndexChanged 

Prof ile . FavoriteTheme = ThemeList . SelectedValue 

Response .Redirect (Request .Url . ToString ( ) ) 
End Sub 

C# 

protected void ThemeList_SelectedIndexChanged (object sender, EventArgs e) 
{ 

Prof ile . FavoriteTheme = ThemeList . SelectedValue ; 
Response . Redirect (Request .Url . ToString ( ) ) ; 

} 


CHAPTER 18 
Exercise 1 Solution 

Debugging is tlie process of watcliing your code execute in tlie development environment- 
investigating variables and lool<ing into objects in order to understand the execution path of your 
code— looking for bugs with the aim to fix them. Debugging usually tal<es place at development 
timein your Visual Studio IDE. 

Tracing, on the other hand, provides you with information on the runtime execution of your code. 
As discussed in this chapter, you can use tracing to get information about events that fire and the 
order in which they fire. Additionally, you can add your own information to the trace. Because dis- 
abling tracing through configuration greatly minimizes the performance overhead associated with it, 
you can leave your trace calls in the code, mal<ing it easy to disable and enable tracing whenever you 
need it. 

Exercise 2 Solution 

The best way to stop a possible exception from ending up in the user interface is to wrap your code 
in a Try/Catch blocl<. That way you can display an error message to the user in case something goes 
wrong. Your codecould end up looking like this: 

VB.NET 

Try 

' Execute code here to send an e-mail. 
Catch ex As SmtpException 
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ErrorMessage . Text = "Something went wrong while sending your message." 
End Try 

C# 

try 
{ 

// Execute code here to send an e-mail. 

} 

catch {SmtpException ex) 
{ 

ErrorMessage . Text = "Something went wrong while sending your message."; 

} 

Exercise 3 Solution 

To understand which exceptions occur in the site and find out where they occur (that is, what 
pages or code files are causing the exceptions) you can log all exceptions using some code in the 
Appiication_Error event handler. The exception details you can intercept in this method should 
help you understand the cause of the exception, which in turn should help in finding a fix for it. 

To prevent your users from seeing the "Yellow Screen of Death" error messages, you need to use 
custom error pages. You should createa simpleWeb Form that tellstheuser something went wrong. 

To tell theASP.N ET run time to show the contents of that file instead of the error message, you need 
the following element in your web.config: 

<customErrors mode="On" def aultRedirect=" -/Errors/AllOtherErrors . aspx" 
redirectMode="ResponseRewrite" > 
<error statusCode="500" redirect="~/Errors/Error500 .aspx" /> 
</customErrors> 

This element sets up a special page for error code 500 that occurs when your code crashes 
unexpectedly. 

W hen other exceptions occur, such as a " Page not found" error, users are sent to the more generic 

AllOtherErrors . aspx page. 


Configuring SQL Server 2012 


So far, the exercises in tlie bool< assume tliat you are using M icrosoft SQL Express 2012 
LocaiDB Edition 11.0 as tlie database for tlie Pianet Wrox project. SQL Express LocaiDB 
Edition 11.0 is great for development because it's free, liglitweiglit, and easy to use. However, 
it's not designed to be used in a production environment and is limited in terms of processor 
and memory usage and database size. In cases where the LocaiDB edition is not enough, you 
need to look at its bigger brothers: SQ L Server 2012 Express edition or the commercial ver- 
sions of SQL Server 2012, such as the Standard or Enterprise Editions. In this appendix you 
learn more about SQL Server 2012, its security model, how to enable your SQL Server 2012 
database and ASP.N ET 4.5 website to worl< together, and how to use SQL Server M anagement 
Studio Express, a free tool from M icrosoft that lets you manage your database. 

Although this appendix doesn't discuss earlier versions of SQL Server, you'll find that most of 
the concepts apply to these older versions as well. In fact, you can also use SQL Server 2012 
M anagement Studio Express to manage older SQL Server 2005 and 2008 databases. This 
appendix uses SQL Server Express edition because it's a free download, but the same prin- 
ciples apply to the commercial versions of SQ L Server. 


CONFIGURING SQL SERVER 2012 

Before you can configure your database, you need to be aware of the various security concepts 
that are inevitably associated with databases and web applications. In Chapter 19 you learned 
how the account used by the web server plays a big role when configuring security settings for 
thefilesystem, and that's no different when connecting to SQL Server. In thefollowing section, 
you get a quicl< primer on thedifferent ways to connect to SQL Server. In the section that fol- 
lows you see how to attach your .mdf database files to SQL Server, followed by a discussion of 
configuring your application and database so they can talk to each other. 

Terminology and Concepts 

W hen you connect to a SQ L Server database, SQ L Server needs to know who you are, so it 
can enforce the correct access policies on the objects like tables in the database. SQL Server 
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supports two different authentication meciianisms: SQ L Server Autlientication and W indows 
Autiientication (often called Integrated Security). Both come with a few advantages of their 
own and require you to write different connection strings to connect to SQL Server. In the 
following section you see the two most common connection strings, but you're advised to visit 
www . connectionstrings . com for an extensive list of possible connection strings. 

SQL Server Authentication 

W ith SQ L Server Authentication, SQ L Server tal<es care of user management. You manage the users 
for your SQL Server database with M icrosoft SQL Server M anagement Studio, either the Express 
edition (which you see how to use a little later in this appendix) or the full versions that ship with 
the commercial versions of SQL Server. SQL Server uses a login that handles authentication. You 
define this login at the server level by providing a login name and a password. A login can then be 
mapped to a database user to grant access to a specific database. 

To connect your web application to a SQL Server installation that requires you to useSQ L Server 
Authentication, you need to pass a usernameand password in the connection string of your applica- 
tion. A typical connection string looks lil<e this: 

Data Source=ServeriVame; Initial Catalog=DatajbaseiVame; 
User Id=UserName ; Password=Password; 

In this case the Data source points to an unnamed instance of SQL Server: the SQL server is 
addressed by its machine name alone. It's also possible to install SQL Server as a named instance. 
With a named instance, the name of the server is followed by a bacl< slash (\) and the name of a par- 
ticular SQL Server instance. For example: 

Data Source=ServerName\lnstanceName: Initial Catalog=Datai>aseiVame; 
User ld=UserName: Password= Pas sword : 

SQ L Server Authentication is often used when you need to connect to a remote SQ L Server over the 
Internet because Windows Authentication, discussed next, is not supported in that scenario. 

Windows Autlientication 

With Windows Authentication, theWindowsQStal<escareof user management. All interaction 
with the database is done in the context of the calling user so the database l<nows who's accessing 
the system. You still need to map a Windows login to a SQL Server database user so SQL Server can 
determine whether the account has sufficient permissions. I show you how to do this later. 

A typical connection string using WindowsAuthentication looks likethis: 

Data Source=ServerName: Initial Catalog=Datai>a,seName; Trusted_Connection=True 

Instead of specifying a usernameand password, you add Trusted_connection=True to the con- 
nection string to indicate you want to connect to the server with the user context of the calling user. 
You may also come across the setting integrated security=True, which has the same effect. 

Because both authentication methods eventually do the same thing (they enable you to connect to 
SQ L Server), you may wonder which one of the two you should use. 
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Choosing between Windows and Server Autlientication 

In general, it's recommended to use WindowsAuthentication when possible. The fact that you don't 
need to use a password in the connection string means your application will be a bit safer. You don't 
need to send the password over the wire, and it's also not stored in a configuration filefor your 
application. 

However, SQL Server Authentication is a bit easier to setup. Because you specify theusername 
and password explicitly, you don't need to know the final user account that your application runs 
under. 

Later in this appendix you see how to use both authentication mechanisms to connect to your data- 
base. H owever, you need to lool< at something else first: the tools used to manage SQL Server. 

Using SQL Server Management Studio 

You use SQL Server M anagement Studio to manage your SQL server and databases. It enables you 
to attach and detach databases to your SQ L Server; create new database objects I il<e tables in exist- 
ing databases; select, create, edit and delete data; and much more. 

So far, you've been using the Local DB version of SQL Server, the developer-friendly version of SQL 
Server. In addition to LocalDB, M icrosoft has another free version of SQL Server called SQL Server 
Express. The following sections of thisappendix show you how to worl< with thisfreeSQL Server 
Express edition, because it's very similar in use compared to its commercial and production-ready 
databases. If you only installed LocalDB, you need to download and install SQ L Server Express 
along with the free SQL Server M anagement Studio Express. The section, "Installing SQL Server 
2012 Express," in Chapter 12 explains how to acquire SQL Server 2012 Express Edition as well as 
its M anagement Studio component. 

If you are already using a commercial version of SQ L Server, you already have access to the full ver- 
sion of SQL Server M anagement Studio, because it comes bundled with the database engine. 

If you are having trouble connecting to a remote SQL Server (for example, an instance of SQL 
Server that is not on the same physical server as the one on which you're running M anagement 
Studio), you may need to enable remote connections for that SQL Server first. This is discussed next. 

Enabling Remote Connections in SQL Server 

W hen worl<ing with SQL Server, you may receive an error stating that the server was not found, not 
accessible, or that remote connections may not be configured properly. 

Although you may get this error when the database server is down, you also get this error when 
SQL Server isnot configured for remote connections. In a default installation, SQL Server allows 
only local applications to connect and blocks remote connections automatically. To resolve this, and 
grant remote systems access to the server as well, follow these steps: 

1. Q pen the SQL Server Configuration M anager from the Start menu or Start screen. Depending 
on the version of SQ L Server you're using, this item may be located under the M icrosoft SQ L 
Server 2012/Configuration Tools submenu. 
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2. In the window that appears, expand SQL Server Network Configuration, iocateyour 

instance of SQL Server, and ciici< it to dispiay the iist with avaiiabie protocois. If you're run- 
ning a 64-Bit version of W indows, you see an additional node with this name, followed by 
(32-Bit). In that case, find the one that contains the Protocols for SQLEX PRESS node. Figure 
B-1 shows the list for a SQL Server instance called SQLEX PRESS on a 32-Bit machine. 
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FIGURE B-1 

3. In the list with protocols on the right, right-clicl< N amed Pipes and choose Enable if its status 
is currently set to Disabled. 

4. Repeat the previous step, but now enableTCP/IP. 

5. Restart SQL Server. To do this, clicl< SQL Server Services in the SQL Server Configuration 

M anager (shown in Figure B-1), then right-clicl< your server and choose Restart. If you get an 
error about security permissions, you may need to reboot your computer instead. 

SQL Server now allows incoming connections from remote machines. However, before you can 
actually use your databases, you need to attach them to SQL Server first. This is described in the 
following section. 


NOTE If you have trouble connecting to SOL Server, make sure that SOL Server 
is installed and running. To verify this, open the Control Panel and then open 
the Administrative Tools section found in the System and Security category. 
Next, open the Services item and then verify that the SOL Server instance 
you are connecting to is running. If you installed SOL Server Express on your 
local machine with the default instance name, the service is called SOL Server 
(SOLEXPRESS). 


Attaching Databases to SQL Server 

SQL Server Express enables you to work with database files in two ways: you can either attach them 
at run time using a special attribute in the connection string, or you can attach them using tools 
such as M anagement Studio before you start using the database. 
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You've been using the first option in aii database-reiated ciiapters so far using tiie LocaiDB version 
of SQL Server. Tlie Planet Wrox connection string you used iooi<s iii<e tliis: 

<add name= " PlanetWroxConnect ionStringl " 

connectionString="Data Source= (localdb) \vll . 0 ; 

AttachDbFilename= | DataDirectory | \PlanetWrox.mdf ;Trusted_Connection=True ; " 
providerName=" System. Data . SqlClient " / > 

Tiiis connection string points to a database caiied pianetwrox.mdf iocated in tiie website's App_ 
Datafoider (determined by |DataDirectory|). Tiie connection string instructs SQL Server to 
attacii tiiis database fiie to SQL Server LocaiDB on tiiefiy wiien it's used. W iien tiie database is no 
longer needed, it is detached again. You can use the same connection string to target SQL Server 
Express by changing the data source to .\sqiExpress. 

This is a great solution for local development because it enables you to easily create and use SQL 
Server databases and move them around from project to project. However, with a production data- 
base this option isn't good enough and you need to attach the database to SQL Server first. The 
following steps explain how to attach the pianetwrox.mdf database to an instance of SQL Server 
in case you have the need. You can follow the exact same steps if you want to use SQL Server 
M anagement Studio to perform maintenancetasl<s on a SQL Server database that you cannot do in 
Visual Studio (managing users and roles, for example). 

1. Create a folder that will hold your new database, such as c: \Data\sqiserver. 

2. M ove the pianetwrox.mdf file and its associated . idf file from the website's App_Data 
folder at c : \BegASPNET\Reiease to this new folder. 

3. Enable M odify permissions on thefolder where the database resides (c:\Data\sqiserver) 
for the account used by SQ L Server (which is the N etworl< Service account by default) and 
for your own account. Chapter 19 explains how to set these permissions. 

4. Qpen SQL Server M anagement Studio and log in to your SQL Server instance to which 
you want to attach the database. Depending on your security settings, you may have to run 
this process as an administrator. To do this for Windows 7 or Server 2008, right-clicl< the 
M anagement Studio Start menu item and choose Run as Administrator. For Windows 8 or 
Server 2012, right-clicl< the item in the Start screen and then choose Run as Administrator 
from the Q ptions bar that has appeared. 

5. Right-clicl< the Databases node and chooseAttach. 

6. In the dialog box that follows, clicl< the Add button and then select the pianetwrox.mdf file 

you moved to C:\Data\SqlServer in Step 2. 

7. Clicl< the value in the Attach As column to make it editable and type pianetwrox as the new 
name that will be given to the database. Q nee you're done, your dialog box should look like 
Figure B-2. 

8. Click QK to attach the database to SQL Server. If you get an error, makesureyour own 
account (or the Users group you are part of) and the Network Service account both have 

M odify permissions on the C:\Data\sqiserver folder and the .mdf files this folder contains. 
Also, try running SQL Server M anagement Studio as an administrator as explained in step 4. 
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FIGURE B-2 

9. Y our database is now accessible under the Databases node 
of M anagement Studio's 0 bject Explorer. If you expand the 
Databases element and then look into your database, you 
should see familiar items like tables that you also saw in 
the Database Explorer in Visual Studio earlier in the book. 
Figure B-3 shows the attached database and its tables. 

At this stage, only administrative accounts (Windows administra- 
tors or the built-in SQL Server administrative account called SA) 
have access to the database. To have the Planet W rox website work 
with these two databases, you need to configure both SQL Server 
security and your website. You see how to do this next. 

Connecting Your Application to SQL 
Server 2012 

In the following section, I show you how to connect to SQL Server 
from two different but common scenarios: using SQL Server 
Authentication and using Windows Authentication when IIS and 
SQL Server are on the same server. For both scenarios, you see 
how to configure SQL Server, the Planet Wrox website, and if nec- 
essary, your Windows accounts. 
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You're likely to use the first scenario when dealing with an external hosting company that hosts 
your site. W hen web hosts offer SQ L Server, they often use SQ L Server Authentication and, as such, 
require you to pass a usernameand password to the database server. 

The second scenario is useful if you host the site yourself and have both SQL Server 2012 and IIS on 
the same machine. 

M ore advanced scenarios, such as using W indows Authentication with IIS and SQL Server on two 
different machines, are beyond the scope of this appendix. For more information about config- 
uring and securing SQL Server, get yourself a copy of Professional M icrosoft SQ L Server 2012 
Administration by Adam Jorgensen, Steven Wort, RossLoForte, Brian Knight, 2012, (Wrox, ISBN : 
978-1-1181-0688-4). 

Scenario 1 — Using SQL Server Autlientication 

From a configuration point of view, this is probably the easiest scenario to configure: all you need to 
do is mal<e sure that your SQL Server installation supports SQL Server Authentication, create a user 
in SQL Server, and then use that account in the connection string of the Planet Wrox website. To do 
this, follow these steps; 

1. In SQL Server M anagement Studio, right-clicl< the server name in the Qbject Explorer shown 
in Figure B-3, choose Properties, and switch to the Security category. The dialog box shown 
in Figure B-4 appears. 
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2. If not already selected, choose the SQL Server and Windows Authentication M ode item 
at the top of the screen. Before you click OK, click theHelp item at the top of the screen 
and read a bit more about SQL and Windows Authentication, and determine if you really 
need SQL Server Authentication. Windows Authentication is more secure than SQL Server 
Authentication, so you're advised to use that option whenever possible. 

3. If you changed the server authentication, restart SQL Server. You can do this by right-click- 
ing the server in the Object Explorer and choosing Restart. If you get an error about security 
permissions, you may need to reboot your computer instead. 

4. Back in SQL Server M anagement Studio's Object Explorer, expand the server's Security node 
visible at the bottom of Figure B-3. M ake sure you choose the one under your server name, 
and not the one belonging to a specific database. Right-click Logins and choose N ew Login. 

5. Type a login name, then select the SQL Server Authentication option, and type a password 
(twice). In this and the following examples, I'll use pianetwroxuser as the username, and 
pa$$wOrD (wlth a zero instead of the letter o) as the password. 

6. Clear the Enforce Password Expiration option. This also disables User M ust Change 
Password at N ext Login. Your dialog box should end up looking I ike the one in Figure B-5. 
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If you want to learn more about the individual settings on this screen, clicl< the Help button 
at the top of the screen. 

7. Clicl< OK to create the new account. 

W ith the account created, the next step is to give this new account the proper permissions to your 
database: 

1. On the Object Explorer, expand Databases, then the PlanetWrox database, followed by the 
Security node. Finally, right-clicl< the Users node and choose N ew User. 

2. In the User Type drop-down, choose SQL User with Login (this option doesn't exist in earlier 
versions of M anagement Studio). In the User N ametext box, type PlanetWroxUser. 

3. In the Login N ametext box, type PlanetWroxUser again. Alternatively, clicl< the ellipsis but- 
ton, then clicl< Browse, and select the user from the list that has appeared. 

4. Clicl< M embership in the list on the left and you see a box labeled Database Role 

M embership (in earlier versions of SOL Server M anagement Studio this box is on the same 
page where you enter the username.) In this box, you can choose a number of roles that you 
can grant to your new user. The rule here is: give users as few permissions as possible. A 
good choice is db datareader and db datawriter, which allows the account to both read from 
and write to tables in the database, so checl< these two options, visible in Figure B-6. 


Select a page 
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Owned Schemas 
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_^ Bdended Properties 


Server: 
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Connection: 
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FIGURE B-6 
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NOTE Check out SQL Server's Books Online for more information about the 
various roles. 


5. If you want to set fine-grained security options for your database objects, ciici< tiie Securabies 
option you see in tiie left-iiand part of Figure B-6. Tliis dialog box enables you to determine 
permissions for the user account on objects in your database lil<e tables, views, and stored 
procedures. For the Planet W rox website, you don't need to mal<e any changes in this dialog 
box. 

6. Finally, clicl< OK to create the PlanetWroxUser account and to assign it to thedbdatareader 
and db_datawriter roles. 

7. Y ou can close SQ L Server M anagement Studio because you're done with it for now. 

N ow that SQL Server and your user accounts are configured correctly, the final phase is to configure 
the website to use this new user account. 

1. Open the Web. config file of the deployed Planet Wrox application from thec:\BegASPNET\ 

Release folder. 

2. M odify the <connectionstrings> element as follows: 

<connectionStrings> 

<add name="PlanetWroxConnectionStringl" connectionString="Data Source=ServerName; 

Initial Catalog=PlanetWrox;User ID=PlanetWroxUser;password=Pa$$wOrD" 

providerName=" System. Data. SqlCl lent" 

/> 

<add name="PlanetWroxEntities" connectionString=" 

metadata=res : //*/App_Code . Plane tWrox. csdl | res ://VApp_Code . PlanetWrox . ssdl | res 
://*/App_Code .PlanetWrox.msl, -provider=Sys tern. Data. SqlClient; provider connection 
strlng=&quot;Data Source=ServerName; Initial Catalog=PlanetWrox; 
User ID=PlanetWroxUser;password=Pa$$wOrD;MultipleActlveResultSets=True&quot; " 
providerName=" System . Data . Ent ityCl lent " 

/> 

</connectionStrings> 

In your configuration file, each connection string should be on a single line. Don't forget 
to replace the value serverName in the Data Source attributes with a valid server name. 
Depending on your server and configuration, this could be as simple as (local) or .\ 
sqiExpress to point to a SO L Server on the local machine, oatabaseserver to point to 

a server called OatabaseServer on the netWOrl<, or something lil<eDatabaseServer\ 

sqi2oi2 that points to a named instance called sqi2oi2 on a machine called 

DatabaseServer. 

3. Save the changes and then open the site by starting your browser and going to 
http://iocaihost. Everything should still worl<, but the site now no longer uses the databases 
in theApp_Data folder; it uses the SOL Server you defined in your connection strings instead. 

If you get an error when browsing to the site on your local host, you may need to turn off 
custom errors in web. config (for security reasons, set it to Remoteoniy instead of to off) 
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to see the actual error message. Possible reasons for an error include an incorrect username, 
password, or server name in the connection string, and an incorrectly configured database 
role membership for the PlanetWroxUser account. 

Scenario 2 — Using Windows Autiientication with IIS and the Database on 
the Same iVIachine 

This is a common scenario, especially when you're running your site on a local machine that 
you control yourself. Both the web server (either IIS or the built-in development web server) 
and SQL Server run on the same physical machine. This scenario mal<es it easy to use Windows 
Authentication because both the web server and SQL Server can use the same Windows account. To 
configure your server for this scenario, follow these steps: 

1. Determine the account used by your web server. Refer to Chapter 19 for precise details 
on how to do this, but you're lil<ely to need the ApplicationPoolldentity account (called 
IIS AppPool\.N ET v4.5 by default). I am using the account IIS AppPool\.N ET v4.5 in the 
remainder of this section. 

2. N ext, you need to map this Windows account to a SQL Server login. To do this, open SQL 
Server M anagement Studio and log in to your SQL Server instance. Expand the Security node 
for the server (and not of an individual database), as shown at the bottom of Figure B-3. 
Then right-clicl< Logins and choose N ew Login. 

3. In the Login N ame box, enter IIS apppooi\.net v4. 5 and click QK to add the new Login. 

W ith the login created, the next step is to map this login to a database user that has the proper per- 
missions to your database: 

1. Qpen the Security nodeof thePlanetWrox database, right-clicl< the Users node, and choose 
N ew U ser. 

2. In the User Type drop-down, choose SQL User with Login (this option doesn't exist in earlier 
versions of M anagement Studio). In the User N ame text box, type .N ET v4.5. 

3. For the Login N ame text box, clicl< the ellipsis button and then clicl< Browse so you can 
select a username. Choose the account you configured earlier (called IIS AppPool\.N ET 4.5) 
and clicl< QK twice. 

4. Clicl< M embership in the list on the left and you see a box labeled Database Role 

M embership (in earlier versions of SQL Server M anagement Studio this box is on the same 
page where you enter the username). In this box, you can choose a number of roles that you 
can grant to your new user. The rule here is: give users as few permissions as possible. A 
good choice is db datareader and db datawriter, which allows the account to both read from 
and write to tables in the database, so checl< these two options, shown earlier in Figure B-6. 


NOTE Check out SQL Server's Books Online for more information about the 
various roies. 
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5. If you want to set fine-grained security options for your database objects, clicl< tlie Securables 
option visible in Figure B-6. This dialog box enables you to determine permissions for the 
user account on objects in your database lil<e tables, views, and stored procedures. For the 
Planet W rox website, you don't need to mal<e any changes in this dialog box. 

6. Finally, clicl< OK to create the database user and assign it to thedbdatareader and db_ 
data writer roles. 

N ow that SQL Server and your user accounts areconfigured correctly, the final step isto configure 
the website to use this new user account. 

1. Open the Web. config file of the Planet Wrox application from the C:\BegASPNET\Reiease 
folder. 

2. M odify the <connectionstrings> element so it ends up lil<e this: 

<connectionStrings> 

<add name="PlanetWroxConnectionStringl" connectionString="Data Source=ServerName; 
Initial Catalog=PlanetWrox;Trusted_Connection=True" 

providerName= "System. Data. SqlCl lent" 

/> 

<add name="PlanetWroxEntities" connectionString=" 

metadata=res : //*/-App_Code . Plane tWrox . csdl | res : //*/App_Code . PlanetWrox . s sdl | r es 
://*/App_Code .PlanetWrox.msl, •provider=System. Data. SqlClient; provider connection 
string=5iquot;Data Source=ServerName; Initial Catalog=PlanetWrox; 
Trusted Connect ion=True;MultipleActiveResultSets=True&quot; " 
providerName=" System. Data. EntityCl lent" 

/> 

</connectionStrings> 

In your configuration file, each connection string should be on a single line. Don't forget 
to replace the value serverName in the Data Source attributes with a valid server name. 
Depending on your server and configuration, this could be as simple as (local) or .\ 
sqiExpress to point to a SO L Server on the local machine, oatabaseserver to point to a 
server on the networl< called DatabaseServer, or something lil<eDatabaseserver\sqi2oi2 
that points to a named instance called sqi2oi2 on a machine called oatabaseserver. 

3. Save the changes and then open the site by starting your browser and going to http: // 
locaihost. Everything should still worl< as expected, but the site now no longer uses the 
databases in theApp_Data folder; it uses the SOL Server defined in your connection strings 
instead through Windows Authentication, as identified by the Trusted Connection=True 
attribute in the connection string. 

If you get an error when browsing to the site, you may need to turn off custom errors in the 
Web. config file (or Set it to Remoteonly) to See theactual error message. Possible reasons 
for the error are an incorrect server name in the connection string and an incorrectly config- 
ured database role membership for the configured account. 


Once you find out the correct account and have configured SOL Server correctly, using Windows 
Authentication isn't that hard. In fact, your connection string now becomes a little easier and more 
secure, because you don't need to store a username and password in it anymore. 
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CONFIGURING APPLICATION SERVICES 

Earlier in tliis bool< you learned that theASP.N ET application services make use of a SQL Server 
database. You also saw how to make sure your own website and the application services use the 
same database. 

If you chose not to merge your database and the one used by the application services, your site now 
uses two databases: your own and one called aspnetdb.mdf. H owever, you can still merge them 
later if you want. In earlier versions of ASP.N ET, this involved quite a bit of work including changes 
to the Web. config file and running command-line tools. However, with the updated providers this 
is now pretty simple. Follow these steps to let the application services use your own database: 

1. First, make sure the application services point to a connection string you want to use. To 
do this, you need to set the connectionstringName to a Connection string defined in your 
config file. The following example shows how to do this for the M embership section, but the 
other services follow a similar pattern: 

<membership default Provider ="DefaultMember shipProvider" > 
<providers> 

<add name="DefaultMember shipProvider" 
type =" System. Web . Providers . DefaultMember shipProvider , 

System. Web. Providers, Version=l . 0 . 0 . 0 , Culture=neutral , 
PublicKeyToken=31bf 3856ad3 64e3 5" 
connectionStringName=" Plane tWroxConnectionStringl" 
enablePasswordRetrieval=" false" enablePasswordReset="true" 
requiresQuestionAndAnswer=" false" requiresUniqueEmail=" false" 
maxInvalidPasswordAttempt s= " 5 " minRequiredPasswordLength= " 7 " 
minRequiredNonalphanumericCharacter s= " 1 " passwordAttemptWindow= " 10 " 
applicationName="/" 
/> < /providers > 
< / membership> 

Notice how connectionstringName pointsto the Connection string called 
pianetwroxconnectionstringi, defined elsewherein the config file. 

2. M ake sure the account used by the web server has permissions to alter the database schema. 
You can accomplish this by adding the account to thedb_ddladmin group, shown in Figure 
B-6. This grants the account the permissions to execute Data Definition Language state- 
ments, which means it can create and alter tables and other objects in the database. 

3. Restart IIS. To do this, start the IIS Server M anager (type inetmgr in the Start menu or Start 
screen), click your server name, and then click Restart in the Actions panel on the right. To 
minimize impact on the server, you could also recycle just the application pool used by the 
site by right-clicking it and choosing Recycle. 

4. Browse to your site and request the Login page. Try to log in with a fake username and pass- 
word. At this stage, the .N ET run time will modify the database and add the necessary tables 
to it. If you look in the database defined in the connection string used by the membership ser- 
vices, you'll notice it now contains the tables that are used by M embership. Roles, and Profile. 

5. For security reasons, you should now remove the account from the db_ddladmin group 
because using M embership at run time does not require these permissions. 
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authentication, identity, 604-605, 642 
authentication element, 611 
authorization rules, 605, 642 

Authorized COlumn, 445 

AutoiD property, 296 
automatic properties, 193 
AutoPostBack, 125, 242, 548 
Autos window, 704 
Average operator, 509 
a : V isited selector, 92 
Aziz, Atif, 697 
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implementing, 221 
inlieritancefrom, 218-219 
Basic Settings mode, 17 
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WebM atrix, 36 
Beginning CSS: Cascading Stylesheets for 
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Beginning M icrosoft SQ L Server 2012 
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BuiietedList control, 118, 513 
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: button filter, 403 
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c# 

access modifiers, 200 
array instantiation, 153 
attributes, 365 
caching with, 593 

cross-language communication, 149 
declaring variables in, 147 
examples as given in, 50 
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LINQ syntax, 498 

methods, 178 
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resources on, 146 

as strongly typed, 506 

typecasting, 152 

VB.N ET code similarities, 53 

web application projects with, 38 
cache dependency, 590 
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cached copies, 67 
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defined, 589, 602 
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Calculator ClaSS, 379 
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code, 373-378, 379, 709-712 
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ClientID property - complex events 


clientiD property, 330 
ciientiDMode property, 218, 296, 331 
ciientiDRowSuf fix property, 455 
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Code Behind vs. inline, 49 
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for cookies, 238 
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files, 43 
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hard-coded settings, 730-731 
highlighted, 224 

HTML.seeHTML (HyperTextM arkup 

Language) 
JavaScript shortcoming, 385 
jQuery, 392, 396, 406, 408 
moving in debugged, 701-702 
organizing, 177-188 
stylesheet, 72 
for text formatting, 57 
typos in, 242 
using minimal, 203 
Code Behind files 
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caching code, 598 

in code compilation, 146 
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hand-coding, 585 
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Code Only profile, 17 
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ease of adding CSS, 67 
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LoginView COntrol, 614 

rules, 71 
usefulness of, 68 

CodeBehind.aspx page, 51 
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CollapselmageToolTip property, 270 
CollapselmageUrl property, 270 

collections, 154-155 
color property, 96 
columns 

configuring, 473 

ID storage of user profile, 651 

styling, 562 
Combined selector, 73, 398, 400 

ComraandField column, 461, 473 
CommandName , 534 

commands 

keyboard shortcuts for, 27 

package, 389 
comments 

C #, 186 

VB.N ET, 186 

CSS, 90 

HTM L, 14 

writing, 186-188, 203 
Common Type System (CTS), 149 

CompareValidator COntrol, 322 
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compatibility, backward, 386 
compilation 

code, 146 

errors, 680 

recompilation, 649 
compiler, 680 
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compositescript property, 357 
concatenation operators, 163 
conditions, 157 
confirmation email, 619-621 
connection strings, 465, 495, 611, 650 

ConnectionString attribute, 523 
connectionStringName attribute, 624 

constructors, 195-197 

contact form animation, 410-414 

contactForm user control, 341-345 

ContactForm . ascx, 315, 358 

container controls, 122, 143 

: contains (text) filter, 403 

content 

HTML tags for renderi ng, 11 

personalized, 643 

user controls to manage, 286 

Content blOCk, 401 

Content control, 216, 218 

Content Delivery N etwork (CDN ), 387, 392 

content pages 

adding user controls to, 290-293 

ContentPlaceHolder, 212-215 

defined, 208, 252 

user controls to manage, 285 

ContentPlaceHolder control, 211-212, 216, 

218, 398 

ContentTemplate property, 355 
ContextTypeName property, 518 
Continue For lOOp, 177 
continue lOOp, 177 
Control Parameter, 466 

controls, see also ASP.N ET Server Controls; 
data controls 
bind, 465 
client ID of, 217 

ciientiDMode property, 296 
ContactForm user, 341-345 
content, 212 

data source, 456, 494, 495, 574-579, 592 


data-bound, 454-455,494, 535, 

536-538, 555-557 
events, 572 

formatting with styles, 554-555 
hand-coding form, 585 
HTML vs. Standard, 132-133 
life cycle of, 564-569 
login, see login controls 
relative U R Ls in server-side, 256 
state storage for, 135 
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user, see user controls 
using navigation, 257-276 
validation, 313-314 
and View State reliance, 140 

Web. sitemap file for, 258 
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Control sDemo . aspx page, 25 
ControlToCompare property, 323 

controiTovaiidate property, 314, 317, 320, 
654 

Convert ClaSS, 151 

converting data types, 150-152 

CookieParameter, 466 

cookies 

added to debugging code, 697 

authentication, 612 

browser settings on, 242 

defined, 252 

how to install, 238 

privacy and, 239 
Cookies Collection, 243 
Copy method, 340 
Copy Web Site, 742 
copying 

style sheet file, 67 

websites, 741-745 
Count operator, 509 

CreateDateTime COlumn, 445, 586 
CreateUserText property, 608 
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CreateUserUrl property, 608 
CreateUserWizard COntrol, 617-621, 626 

Criteria pane, 432 

C ross Page Postbacl<s, 138 

CRUD operations 

accessed via EntityDatasource control, 
518 

defined, 440, 460 

preventing errors during, 574 

in relational databases, 452 

via L I N Q to SQ L operations, 499 
CSS (cascading stylesheets) language 

adding to web pages, 85-87 

applying styles, 98-100 

Box M odel, 78 

case sensitivity of, 70 

creating embedded and inline style sheets, 
93-98 

CSS Editor, 88-92 

defined, 65 

exercises with, 104 

files, 45, 738 

vs. HTM L, 66-67 

image files, 237 

language parts, 72-79 

markup vs. H T M L tables, 57 

methods, 404-405 

for organized item display, 534 

outdated versions of, 360 

practical tips for, 102-103 

practice writing, 68-71 

support for, 65 

syntax, 397 
CSS M ethods 

CSS method/addClass method/ 

removeClass method/toggleClass 
method, 404 

applying elements to, 396, 400 
applying matched sets to, 406 
background color change via, 401 


(name) , 404 
(name, value) , 404 
(properties) , 404 

cssciass property 

data-bound controls, 556 
Label control, 598 
Menu control, 261 
of server controls, 114 

TreeView COntrol, 270 

validation control, 320 

CssDemo . aspx, 68 
customErrors element, 691 
CustomValidator control, 327-332 


DarkGrey theme, 231, 233 
data 

access code, hand-coding, 579-588 

added to the trace, 723-724 

binding, 465, 478, 491 

-bound controls, see controls, data-bound 

caching, 589 

creating, 437 

deletion, 438, 526-536 

displaying and editing, 456-462 

editing, 456-462 

encapsulation, 192 

exercises with, 494 

filtering, 429, 466-472 

flows, 311 

hashing, 624 

insertion, 463-464, 479-493, 526-536 
joining, 434-437 
ordering, 430 
paging, 544, 550 
presentation, 66 

processing at the server, 334-345 
querying, 498 

reading with SQL, 427-438 
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data controls - debugging 


reliance on cached, 590 

selecting from sample database, 431-434 

server access to, 363 

shaping with anonymous types, 511-513 
SQ L for managing, 425 
stale, 502, 590 

storage, 238, 239, 644, 652-656 

stores, 606, 607 

summary of work with, 494 

tips, 701, 728 

types and variables, 147 

updating, 438, 493 

validating, 312 

work in sample database, 438-441 
data controls 

customizing appearance of, 472-473 
data-bound, 454-455, 473-479, 494, 535 
Entity Framework work with, 500 

EntityDataSource COntrol, 517-524 

events, 569 

Listview control, 524-536 
strongly typed data-bound, 536-538 
use of with EF, 517 
data files, 44 

data models, 501-507, 552 
data source, 455, 589 
data types, see also types 

converting and casting, 150-152 

creating for properties, 297-298 

HTM L5, 317-320 

namespaces as organizing, 184 

non-standard Profile, 647 

resources on, 147 

SQL Server, 441-442 

variables and, 147-151 
Database Explorer, 19, 457 
databases, 421-452 

access exceptions, 689 

adding tables to, 443 

attached to the SQL server, 465 


creating sample SQL Server, 425-427 

defined, 422-423 

editing reviews, 586 

EF design with relationships in, 504 

exercises with, 451 

exporting Planet Wrox, 760 

filtering, 466 

for login page creation, 611 
objects, 500 

password storage in, 624 
practical tips for, 450 
re-creation, 762-763 
relational, 422 

selecting data from sample, 431-434 
summary of, 451 

table relationships for consistent, 446 

work with sample, 438-441 
DataBind, Calling, 507, 516, 517 
data-binding expression syntax, 465 
Dataltem property, 573 
DataList control, 454 

DataNavigateUrlFields property, 475, 478 
DataNavigateUrlFormat String property, 

475, 478 

Datapager control, 455, 517, 544-549 
Dataset class, 499 
Datasource property, 507, 514, 516 
DatasourceiD property, 261, 507, 526 
DataTextFieid property, 475, 514 

DataValueField 

date, absolute expiration, 598 
date data type, 441 
dates, 147 

datetime data type, 441 
datetime2 data type, 441 

debugger keyWOrd, 712 

debugging 

browser tools, 354 
defined, 728 
extensive, 705-709 
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decimal data type - DynamicEnableDefaultPopOutlmage property 


introduction to, 698 

moving in debugged code, 701-702 

with Page Inspector, 712-718 

practical tips for, 725 

summary of, 726 

web application how-to, 698-701 

windows, 702-705 
decimal data type, 441 
decision making, 157, 166-169 
declaration 

control, 292 

CSS, 71 

of validation controls, 313 

of variables, 147 
default documents, 257 
default value, 446 
Default Web Site, 752 

Default . aspx page 

adding M odernizr to, 83 

BodyContent, 7 

in photoAibums folder, 673 
styling with, 82 
for web page linking, 61 
web server for displaying, 9 

Def aultMembershipProvider, 607, 631 
Def aultRoleProvider, 607, 631 

defauitvalue attribute, 646 
Delete method, 340 
DELETE statement, 438, 440 

DeleteParameters, 460, 495 

#DemoTabie element, 406 
Demos folder, 52, 68 
dependency, cache, 590 

Description column, 519 

Design View 

addition of handler code in, 125 

defined, 64 

vs. SourceView, 48 

in user control creation, 291 
designer file, 504 


DetailsView COntrol 

to allow user photo upload, 518 

customizing, 484-493 

data insertion/update with, 463-464, 
479, 480-483 

as data-bound, 455 

page styling, 483 

replacing, 580 
diagnostics tools, 712 
Diagram pane, 432 
disabling 

skins, 249 

toolbars, 27 

DisappearAf ter property, 261 

Display property, 320, 654 
DispiayAf ter property, 358 

DisplayDirection property, 301, 306 

displaying data, 456-462 

DispiayMode property, 514 

<div> element, 14 

DLL files 

as compilation result, 146 
namespaces, 184 

DOCTYPE, 15 

Document Window 

buttons, 19-20 

customizing the, 26-27 

modifications, 25-26 
documents, default, 257 
Dojo, 386 

$ (document) .ready, 394 

$ function, 395, 397, 413 
DOM (document object model), 396, 404-408 
DropDownList control, 118, 467, 469, 549 
Dynamic Data Entities Web Sites 

controls, 134 

as template option, 36 
dynamic files, 711 

DynamicEnableDefaultPopOut Image property, 

261 
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DynamicLayout property - errors 


DynamicLayout property, 358 



each method, 407 

<EditItemTemplate>, 525 

Editor, CSS, 88-92 

EditRowStyle, 557 

EF (Entity Frameworl<). seeADO.N ET Entity 

Frameworl< 
Element selector, 397, 400 
elements 

CSS, 72, 84, 85 

HTML, 11-14, 14, 15, 32, 60, 66, 78, 
85, 86, 217, 295 

j Query, 418 

matched set of, 397 

replacing, 533 

service, 375 
ELM AH (Error Logging M odules and 

Handlers project), 697-698 
Eiseif Statement, 166 
e-mail 

creating messages, 336-340 

error alert e-mails, 697 

errors in, 338 

exceptions, 689 

password recovery, 624 

Secure Sockets Layer (SSL), 335 

sent from contactForm user control, 
341-345 

sent from your website, 334-340 

signup confirmation, 619-621 
embedded 

<styie> element, 85 

stylesheet creation, 93-98 
Empty Web Site template 

defined, 36 

page creation with, 20, 39 
for Planet Wrox site, 36 


<EmptyDataTemplate>, 525 
EmptyDataRowStyle, 557 
<EmptyItemTemplate>, 525 

Enabiecdn property, 357 

EnableClientScript property, 320 

enabled attribute, 720 
Enabled property, 114 

EnableDelete property, 518 
Enablelnsert property, 518 
EnablePageMethods property, 357, 378 
EnablePartialRendering property, 357 
enablePasswordReset attribute, 625 
enablePasswordRetrieval attribute, 624 
EnableUpdate property, 518 

enabling toolbars, 27 
encapsulation, data, 192, 200, 286 

EndRequest event, 677 

Entity Data M odel files, 44 

Entity Framework. seeADO.N ET Entity 

Framework 
entity sets, 504, 552 

EntityDataSource control, 517-524 

attaching to li stview, 532 
connecting DropDownList to, 549 
as data source control, 456 
defined, 552 
event handling, 541 
hooking checkBoxList control to, 
656 

Inserting event, 535, 538 
Inserting event handling, 526 
item deletion with, 639 
meta data error, 520 

EntitySetName property, 518 

enumeration (enum), 297-298 
= operator, 429 

:eq (index) filter, 402 

Error List window, 22 

ErrorMessage property, 317, 320, 321, 654 

errors, see also exceptions 
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European cookie law - external style sheets 


invalid theme, 271 
pages, custom, 690-698 
troublesliooting web server, 

757-759 
types of, 680-682 
validation control, 313 

European cookie law, 239 

Evai property, 516 

Eval(PropertyName), 534, 535, 538 

: even filter, 402 
event handling 
defined, 201 

Detaiisview control, 484-493 

EntityDataSource control, 541 

and exception throwing, 224 
Inserting event, 526 
ItemCreated, 639 

jQuery, 405-407 

page life cycle and data, 569 

Page_Load, 306 

postback, 220 
understanding, 563 

Event Args, 574 

event-driven environments, 201 
events 

complex and simple, 564 
defined, 201-202 

GridView COntrol, 569 

handling, 201, 220 

jQuery, 396 

styles as, 555 

submit event, 413 
Events tab, 129, 143 
exception handling, 685-690 

blocks, 683-684 

data source controls, 574 

defined, 679, 728 

of events, 224 

exercise with, 685-690 

global, 690-698 

row deletion, 575-579 


summary of, 726 

Try/Catch/Finally, 683-689 

Exception instance, 697 
Exception property, 575, 578 
Exception type, 684, 688 

ExceptionHandled property, 575 

exceptions, see also errors 
catching, 682-685 
defined, 502, 728 
"File not found", 695 
foreign key constraint error, 
578 

404 exception, 696 

possible sources of, 689 

resources on, 697 

summary of, 726 

validation control, 313 
execution 

breakpoint, 708 

path, 680 

tracing page, 719 
Exists method, 340 

Exit For loop, 176 

exiting loops, 176 
ExpandDepth property, 270 

ExpandlmageToolTip property, 270 
ExpandlmageUrl property, 270 

experimentation, programming, 
203 

Expert Settings mode, 17 
Export Template, 250 
expressions 

binding, 478 

in decision making, 168 

defined, 161 

syntax of, 465, 495, 731, 
766 
ExtJS, 386 

extending themes, 235 
external <styie> element, 85 
external stylesheets, 100 
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fadein - <form> element 


fadeino effect, 409 
f adeout ( ) effect, 409 
fadeTo 0 effect, 409 

FavoriteGenres profile, 648, 656-661, 664 

fields 

bound, 461 

configuring, 473 

defined, 190 
File class 

Exists method, 340 
ReadAiiText method, 340 
writeAiiText method, 340 
defined, 347 

System. 10 namespace, 340 
: file filter, 403 
"File not found", 695 
files 

adding, 42-43, 44-45 
App_code folder for, 180 
ASP.N ET types, 41-42 
code, 43 

Code Behind, 49 
data, 44 

dynamic, 10, 711 
exporting data to, 760 
extensions, 45, 740 
project, 34 

reading from text, 340-345 
separate style sheet, 67 
skin, 246-247 
special types, 47 
synchronizing, 744 
text, 245 
types, 64 

upload exceptions, 689 

Web. sitemap file, 258-260 

zip, 228 

filesystem configuration, 754-757 
filesystem deployment, 741 


Fiieupioad control, 131, 541, 542 
filters 

data, 429, 467-470, 470-472 
database, 466 

jQuery, 395, 400, 402, 402-403, 420 
Finally block, 683 
Find Results window, 23 

FindControl, 573 

Firebug, 354, 713 

Firefox, 354, 713 

: first filter, 402 

First operator, 511 

FirstorDef auit Operator, 511 

flicker-free pages, 349, 358-362 

float data type, 441 

float property, 84 

floating windows, 23 

folders, 46 

font 

color, 69 

size, 69 
Font property, 114, 556 
<font> element, 66 
<footer> element, 12 

FooterStyle, 557 

For Each (foreach) lOOp, 175 

For loop, 173 

foreach lOOp, 122 

Forecoior property, 114, 555 
foreign keys 

constraint error, 502, 578, 579 

introduction to, 423 

in relational databases, 452 

in table relationships, 446 
Formatting menu, 58-60 
formatting text 

adding, 55-57 

CSS for, 67 

and inserting, 54 

style shortcomings of HTM L, 66-67 
<f orm> element, 149 
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<form> input controls - handling 


<form> input controls, 13 

FormParameter, 466 

forms, see also Web Forms 
animating contact, 410-414 
collections, 697 
contact, 323-326 
hand-coding controls, 585 
wizard control for, 125 

Formview control, 455 

404 exception, 696 

From clause, 508 

FROM keyword, 428 

FTP site deployment, 741 

functionality, 396 

functions, 177-179 


generics, 155-157, 507 
Genre property, 505 

Genre table 

avoiding exceptions in, 588 
data insertion, 464 

handling row deletion errors, 575-579 

modifications, 572 

pluralizing in, 504 

relationships, 450 

in sample PW database, 427, 439 

Genreld COlumn, 445 
Genres COlleCtlon, 506 

Genres page, 570 

Genres . aspx, 559 

GET method, 143, 312 

getElementByld, 385 

Get-HelpNuGet, 389 

Get-Package Command, 389 

GetProf ile, 675 

Gig Pics feature, 544, 672 

Gigpics folder, 754 

Global Application Class files, 43 


global exception handling, 690-698 

Global. asax, 414, 420, 697 

Gmail, 335 
Golding, Todd, 157 
Google Chrome, 354 
GoogleCode, 392 
> operator, 429 
>= operator, 429 

GridView COntrol 

attributes, 461 

customized columns, 473-479 
for data retrieval, 456 
as data-bound, 454 
Datasource property, 507 
enhancing with styles, 557-559, 562 
handling row deletion errors, 575-579 
Listviewas Compared with, 524 
output events, 569 
review display, 470 
RowDataBound event, 570-574 
styles, 555, 556 

View State control reconstruction, 
569 

visual styling of, 554 

GridViewRowEventArgs, 573 

grouped selectors, 73, 398, 400 
groups, profile, 645, 646, 677 

<GroupSeparatorTemplate>, 525 
<GroupTemplate>, 525 

:gt (index) filter, 402 
Guid class, 543 



hi element, 71 

hand-coding, 579-588 

H andle the Save button, 579 

handler code, 125 

H andler M apping, 10 

handierName parameter, 567 

handling, event, see event handling 
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hard-coded settings - IIS Express 


hard-coded settings, 730-731 

: has (element) filter, 403 

hasli symbols, 408 
hashed, passwords, 624 

Hashtable, 155 
<head> element, 12 

<header> element, 12, 80 

header filter, 402 
HeaderStyle, 557 
HeaderText property, 475 

<head> sectlon, 70 

Height property, 114, 556 

"H ello World" web service, 369 

HelloWorld, 366, 376 

: hidden filter, 403 

HiddenField control, 132 

hide ( ) effect, 408 
hierarchical indents, 87, 90 
H ome node, 260 

HorizontalAlign property, 556 

hotspots, 131 

: hover selector, 92 

href attribute, 62, 85 

H TM L (H yperText M arkup Language) 

added to web pages, 55-57 

applying CSS to, 103 

attributes, 14 

Button control, 248 

calling services from client-side, 365 

comments, 14 

controls, 132-133 

defined, 32 

elements and tags, 11-14 

exceptions, 332-333 

Format and Table menu, 62 

generated by ASP.N ET markup, 16 

inspecting, 713 

on master pages, 212 

page, 42 

in page display process, 9 
rules of HTM L5, 14-16 


sent by server to browser, 350 
shortcomings of, 66-67 
SourceView to see, 48 
tables, adding, 57 

<html>, 12 

HTM L5 

data types, 317-320 

as latest version, 11 

rules of, 14-16 
H TTP (H yperText Transfer Protocol) 

in browser/server process, 10 

defined, 32 

as stateless, 134 

http : / /imar . spaanj aars . com, 765 
http://p2p.wrox.com, 765 

H ungarian N otation, 148 

HyperLinkField, 473 



ID attribute, 108, 217 
Id column 

Genre table, 464 

Gig Pics feature, 518 

INSERT Statement, 437 

in table creation, 440, 444, 450 
ID property, 513 
ID selector, 73, 398, 400, 408 
Identity columns, 437-443 
identities, 442, 452, 604 
_id variable, 586, 587 
If Else Statement, 166 
If statement, 166 
IIS 

defined, 766 
deployment, 741 
installing/configuring, 746-749 
running a site under, 746 
security, 753 
support, 747 
IIS Express, 8-9, 10 
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IIS:ASP.NET- interface 


IIS:ASP.N ET, 748 
Image control, 131, 288 

: image filter, 403 
ImageButton COntfOl, 131 
ImageField, 473 
IraageMap control, 131 

images 

adding to themes, 235-238 
CSS styling of, 86 
Gig Pics feature, 518 

ImageMap control, 131 

large photo album uploads, 543-544 
pageable list of, 544 
sizing, 534-535 
supplying to albums, 548 
user control for banner display, 
288, 297 

ImageUrl COlumn, 519 

<img> element, 13 

I mmediate window, 705, 708 

Include Foreign Key column, 535 

IncludeStyleBlock property, 261 

inference, type, 506, 512, 552 
informational windows, 22-23 
Inherit property, 296 
inheritance, 197-200 

from base page, 218-219, 223, 225 

in the Entity Framework, 504 
initialization, page, 219 
initiaivaiue property, 317 
inline code 

Code Behind vs., 49, 62 

commenting, 186-187 

M arkup View, 64 
Inline Style, 100 
inline style sheets, 93-98, 563 

INNER JOIN, 434, 435 

<input> element, 13 
: input filter, 403 
Insert method, 598 


INSERT statement, 427, 437, 440 

Insert Command, 492 

Inserting event, 526, 538, 542 
inserting text, 54 

insertion, data, 463-464, 479-493 

<InsertItemTemplate>, 491, 525, 538 
Insert I temPosit ion property, 526 
Insert Parameters, 460, 495 

installed packages, 388 
Installed Templates, 7 
instaii-package Command, 389 
instances 

of classes, 183 

named, 465, 495 

of objects, 189 
instantiation 

of arrays, 153 

of objects, 189 
int data type, 442 

integrated development environment (IDE) 
customizing the, 23-26, 31 
debugging features, 711 
defined, 32 

editing with Page inspector, 713 
tour of Visual Studio's, 16 
user control design experience in, 
290 

Integrated Pipeline mode, 752, 766 

IntelliSense 

for anonymous type creation, 512 
in code files with enums, 298 
code for jQuery library, 391, 393, 395, 
410 

as code-writing aid, 51 
comments as appearing in, 188 
in skin files, 246-247 
VS2012, 14, 87 
WCF discovery by, 376 
interface, user 

Ajax to prevent interruption of, 349 
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Internet Explorer - keys 


exceptions appearing in, 682 

hand-coding, 580 
Internet Explorer, debugging, 709-712 
invalidation, cache, 590, 602 

IsUserlnRolemethod, 637 

isvaiid property, 321, 332 

ItemDeleted event, 479 
ItemDeleting event, 479 
Itemlnserted event, 479 
Itemlnserting event, 479, 492, 541 
ItemPlaceholderlD property, 526 

Items collection, 118 

<ItemSeparatorTemplate>, 525 
<ItemTemplate>, 525, 534, 538, 549 

ItemType property, 536, 538 

ItemUpdated event, 479 

itemupdating event, 479, 492 
iteration, 155 


JavaScript 

asynchronous, 349 
bundling/minification of, 738 
case sensitivity of, 375 
debugging, 709-712 
defined, 32 

HelloWorld, 366 

jQuery library as, 392 
and M odernizr, 82 
shortcomings of, 385 
unobtrusive validation, 414-418 

validatePhoneNumbers, 330 

writing, 327 
JavaScript File, 42 

J avaScript 0 bject N otation (J SO N ), 368, 
371 

JOIN statement, 434, 436, 452 
jQuery, 385-420 


adding to master page, 393-395 
vs. Ajax script library, 350 
code run time, 396 
core functionality, 396 
defined, 420 

demo page setup, 400-402 
effects, 408-410 
event handling, 405-407 
exercises with, 419 
filters, 400-403 

installation of latest package, 390 

introduction to, 386 

library inclusion methods, 392 

miscellaneous functionality, 407 

mistakes, common, 394, 408 

new verion of, 386, 392 

oncl ick attribute alternatives, 378 

power of, 414, 417 

practical tips for, 418 

reference location on website, 

391, 394 
for styling, 562 
summary of, 418 
syntax, 395-396 
U I project, 418 

validation controls, 326, 414-418 
website reference to, 391 

jquery-l . 7 . 2 . j s, 391 

j query- 1.7.2. min . j s, 394 

JuiceUI, 418 
jQuery Ul 


keyboard shortcuts 
customizing, 27 

for moving in debugged code, 702 
keys, primary and foreign, 423, 442, 446 
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Label control - logical operators 


Label control 

adding a, 109-113, 118 
appending, 122 
cssciass property, 598 
and LIN Q, 499 
and maintenance of state, 135 
Photo Album page, 675 
property association with TextBox, 653, 
656 

Web Forms, 50 
language, 499 
: last filter, 402 
Last operator, 511 
LastName property, 651 
LastorDef auit Operator, 511 
layout, window, 28 

<LayoutTemplate>, 525 

lazy loading, 505, 552 

LEFT OUTER JOIN, 435 

Lerman, Julia, 500, 588 
< operator, 429 
<= operator, 429 
libraries 

IntelliSensecodefor, 410 

JavaScript, 386 

M odernizr, 83 

N uG et package manager, 387-391 

online versions of external, 392 
Library Package M anager, 387 
life cycles 

control, 564-569 

page, 219-220, 252 

profile changes during page, 651 
LIKE operator, 430 

LinkButton COntrol, 131 

<iink> element, 85 
LINQ (Language-Integrated Query) 
to ADO. N ET, 499-500 


defined, 552 
exercises with, 551 
integration with .N ET, 497 
introduction to, 498-499 
for mapping data models, 501 
practical tips for, 550 
queries, 504-505, 506, 507-511, 

513-517, 517, 517-550, 663 
summary of, 550 
LINQ queries, 504 

LinqDataSource COntrol, 456 

list controls 

data-bound, 454-455 

FavoriteGenres property, 

660 

list of, 118-123 

POST method, 143 
ListBox control, 118 
Listltem Collection Editor, 122 
Listitems control, 122 
lists, tags for, 13 
Listview control, 524-536 

customizing templates, 538-544 

as data control, 517 

as data-bound, 454 

Inserting event, 542 

item deletion with, 639 

<ItemTemplate>, 549 

pageable image list with, 544 
as strongly typed, 538 

ListViewInsertEventArgs, 541 
Literal COntrol, 131 

loading, lazy, 505, 552 
local ISS deployment, 741 
LocalDB, 423 

Localize COntrol, 131 

locaionly attribute, 721 
Locals window, 704, 708 
logic errors, 681-682 
logical operators, 164 
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logical structure - methods 


logical structure, 281 
Login control, 612 
login controls 

creating logins, 607-612 

defined, 642 

exercises with, 615-617 

HTM L, 133 

list of, 612-624 

login as M anager, 635-636 

Login . aspx, 215 

for state storage, 135 

LoginName COntrol, 615 

Loginstatus control, 615, 617 
Loginview control, 614, 617, 636 
loops, 157, 173-177 
: It (index) filter, 402 



Machine . conf ig file, 310 
MailAddress ClaSS, 334 
MailMessage ClaSS, 334, 336 

main menu, 17-18 

Maincontent element, 84, 394-395 

making decisions, 166-169 

M anage N uGet Packages dialog box, 387- 

389, 390 
M anage Styles window, 87, 101 

Management folder, 632, 635 

M anagement section, website, 457 

ManagePhotoAlbum.aspx, 533, 665, 670 

M anagers role, 614, 627, 632, 635, 640, 665 
margin property, 94 
margins, 78 
markup 

adding table, 60 

skin vs. button, 246 
M arkup View 

adding text in, 55-57 

addition of handler code in, 125 


changing page links from, 61 
content placeholders, 215 
defined, 64 
modifications, 25-26 
previewing in, 20 
SourceView as, 48 
typing server control markup in, 113 
master pages, 239-243 

adding jQuery to, 393-395 

adding user controls to, 290-293 

caveats on, 217-218 

consistent layout with, 208-209 

content placeholders, 215-216 

creating, 210-212 

defined, 252 

different views on, 47 

for dynamic theme change, 239-243 

managing page bloat, 562 

nesting, 216-217 

ScriptManager COntrol, 372 

tips on, 249 

user controls to manage, 286 

Web Forms, 42 
matched set of elements, 397, 406, 420 
Max operator, 509 

MaximumDynamicDisplayLevels property, 261 
MaximumValue property, 322 
maxInvalidPasswordAt tempts attribute, 625 

membership, 605, 642 

M embership provider, 624-627 

Menu control, 257, 261-269, 283 

menus, 58-60 

meta data error, 520 

MetaDescription property, 502, 599 

MetaKeywordsproperty, 502 

methods 

adding to user controls, 296-297 
callback, 366 
defined, 194 
File class, 340 
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functions and subroutines, 177-179 
overriding, 198 
page, 363, 378-381, 383 
page load, 567 
signatures, 178 
syntax, 511 
WCF services as, 371 
web services, 364 
jvi icrosoft Developer N etwork (M SDN ), 130, 
147, 556 

M icrosoft Intermediate Language (M SIL), 
146 

Min operator, 509 
minification, 738-740 

MinimumValue property, 322 

minRequiredNonalphanumericCharacters 

attribute, 625 

ininRequiredPasswordLength attribute, 

625 

mode attribute, 611, 612 

M odel View Controller pattern, 34 

models, 501-507 

M odernizr, 11, 82 

modulus operator, 159 

M onochrome theme, 231, 234, 266 

mostRecent attribute, 721 

mouseover events, 396 

Move method, 340 

Muitiview control, 123 

myEntities ObjeCt, 505 


name attribute, 646 
name collisions, 184 
Name column, 518, 554 
Name property, 515 
named instances, 465, 495 
named skins, 248-249, 252 


names 

client ID, 295 

invalid page titles, 232 

page folders, 282 

usernames, 604, 621 

of users in profile configuration, 645 

of web pages, 219 

NameService, 375 

namespaces 
creating, 185 
e-mail, 339 

introduction to, 184-186 

System, 150 

naming containers, 295 
Navigateuri property, 302 
navigation, 253-283 

absolute and relative URLs, 254-257 

controls, 133, 257-276, 271, 555 

exercises with, 282 

forms of, 254 

practical tips for, 281-282 

programmatic redirection, 276-281 

summary of, 282 
nesting 

master pages, 216-217 

Repeater COntrol, 664 

.N ET Framework 

assemblies, 745, 766 

classes, 151 

database tools, 422 

LINQ integration with, 497, 498, 499 

namespaces as organizing, 184 

object orientation (0 0), 189 

1.0, 1 

1.1, 2 

resources on types in, 147 
network communication technology, 364 
N ew Photo Album, 669 
N ew SOL Server installation, 424 
New Style Copy, 100 
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N ew Web Site dialog 
page creation with, 20 
templates contained in, 35-37 
as VS template, 6-7 

nodes, root and child, 259 

Not operator, 164 

<> operator, 429 

NTFS, 754-757 

NuGet, 387-391, 420, 624 

Numbered List, 60 

numbered lists, 60 
numbers, 147 


Optional keyword, 568 
optional parameters, 568 
Options dialog, 31 
Or operator, 164, 430 
ORDER BY clause, 430, 508 
Order By property, 518 
ordered lists, 60 
orEise operator, 164 
Orientation property, 261 

OUTER JOIN, 435 

output caching, 591 
0 utput window, 22-23 
overloads, 277 
overriding methods, 198 


object orientation (0 0), 189-202 
Object Relational M apper (ORM ), 500 

ObjectContext ObjeCt, 504 
ObjectDataSource COntrol, 456 

object-relational designer, 504 
objects 

constructors to create instances of, 195 
defined, 189 

Entity Framework work with, 500 
inheritance, 198 
lazy loading of, 505 
LINO to, 499 

model, mapping data model to, 501-507 
returning strongly typed, 510 

: odd filter, 402 

online packages, 388 

OnMigrateAnonymous event, 677 

\ operator, 159 
Operation Contract, 364 
Operator property, 323 
operators, 158-166 
'"operator, 159 

standard LINO query, 507-511 
WHERE clause, 429 


p2p . wrox . com, 604 

Package M anager Console, 83, 389-390, 697 
packages 

M anage N uG et Packages dialog box, 
387-389 

NuGet installation of, 390-391 

Package M anager Console, 389-390 

types of, 388 
padding, 78 
padding property, 94 
Page class, 599, 672 
Page Inspector, 712-718 

Page Load event, 405 

page methods, 363, 378-381, 383 
page request, 219 
pageMethod attribute, 380, 381 
pageoutput attribute, 720 

PagerStyle, 557 

pages, web 

ASP.N ET display process, 9 
ASP.N ET windows used for, 22-23 
centralized base, 218-219 
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content pages, 208, 212-215 
creating a first ASP.N ET, 20 
CSS additions, 85-87 
custom error, 690-698 
defining server controls on, 113 
DOM loading, 396 
exercises with, 250-251 
flicker-free, 349, 352-357, 358-362 
homepage styling, 79-85 
improving performance of, 559 
invalid titles of, 232, 597 
jOuery demo, 400-402 
jO uery for dynamic, 418 
life cycle, 219-220, 252, 564-569, 
569 

linking, 60-62 

loading, 67, 220, 569 

master pages, see master pages 

page-level themes, 230-231 

partial refresh of, 366, 372 

personalized, 644 

practical tips for, 249-250 

pre-compiling, 745 

previewing in VSEW, 20 

programmatic redirection to other, 

276-279 
reload after postback, 351 
reusable templates for, 225-229 
routing to link, 281 
signup and login, 607-612 
skins, 245-249 
Source vs. Design View of, 48 
starting, 219 

static vs. dynamic display, 10 

subsequent requests to, 591 

summary of, 250 

text markup additions, 54-57 

themes, 229-245 

trace data additions, 723-724 

tracing, 719 


updatepanei control additions to, 
352-356 
PageWrapper element, 84 
paging control, 455 
Panel control, 123-126 

Parameter, 466 

parameterization, 177 
parameters 

HelloWorld, 366 

Insert method, 598 
lists, 179 
optional, 568 

SqlDataSource COntrol, 460 

parent method, 407 
Pascal case, 366 
: password filter, 403 

passwordAttemptWindow attribute, 625 
passwordForraat attribute, 625 
PasswordRecovery COntrol, 621 

passwords 

authentication of, 604 
changing default settings, 624 
implementing functionality in, 621-624 

pas swords trengthRegularExpress ion 

attribute, 625 
path, execution, 680 
pathDirection property, 274 
paths, virtual, 344 

PathSeparator property, 274 

performance, tracing and, 725 
permanent redirect, 277, 283 
permissions, 605, 642 
personalized content 

defined, 677 

importance of, 643 

for logged-in user, 644 

practical tips for, 675 
photoAibum table, 523, 669 
PhotoAlbumId column, 519, 533 
PhotoAlbumId property, 535 
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photos, uploading, 518 
Picture table, 523, 541 
Pictures entity, 532 

PlaceHolder COntfOl, 123 

placeholders 

content page, 209, 215 

template, 228 
Plain Postback, 139 
Planet Wrox 

adding text to homepage of, 55-57 

as basis for new sites, 764 

bundling/minification of, 738 

database creation, 425-427 

exporting database, 760 

Gig Pics feature, 518, 544 

homepage styling, 79-85 

link styling, 91 

master page example, 210 

NTFS settings, 754-757 

Profile in reviews page, 661-665 

relational databases, 422-423 

as sample application, 30 

table relationships, 447 

web services, 369 

website creation, 37-39 
plug-ins, jQuery, 417 
POST method, 143, 312 
postback 

Cross Page Postbacks, 138 

defined, 143 

DisplayDirection property, 306 

event handling, 220 

events raised by, 568 

page load after, 21-22, 351, 356 

in Server Control addition, 110 
Pouncey, Ian, 87 
Predictable property, 296 

Preference type, 647 

preinit event, 238, 244 
premature loop exit, 176 


PreRender event, 220 

presentation, 66 

prev method, 407 

primary keys, 423, 442, 450, 452 

privacy, cookies and, 239 

Private fields, 190 

Private keyword, 192 

production servers, 729 

Professional ASP.N ET 2.0 Design: CSS, 

Themes, and M aster Pages, 764 
Professional ASP.N ET 4.5 in C#and VB, 

580, 588, 590, 697, 764 
Professional CSS: Cascading Style Sheets for 

Web Design, 3rd Edition, 764 
Professional JavaScript for Web D evelopers 

(Zakas), 327 
Professional LINQ, 765 
Professional M icrosoft 1 1 S 8, 765 
Professional .NET 2.0 Generics (Golding), 157 
Professional Search EngineO ptimization 

with ASP.N ET: A Developer'sG uideto 

SEO, 599 
Professional WCF 4: Windows 

Communication Foundation with .N ET 4, 

364 

profile groups, 645, 646, 677 
Profile property, 672 
Profile service 
<group> element, 646 

anonymous identification, 670-671 

cleaning up old profiles, 671-672 

configuring, 645-648 

creating a profile, 648-651 

defined, 677 

exercises with, 676 

introduction to, 644-645 

providers, 650, 677 

reading from and writing to, 652 

reading non-current user profiles, 
672-675 
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Profile.GetProfile - ReadAIIText method 


Storing FavoriteGenres in, 656-661 

Storing user data, 652-656 

summary of, 675-676 

used in reviews page, 661-665 

Profile.GetProfile, 671 
Prof ileManager ClaSS, 672 
Prof ileParameter, 466 

profiles, 605 

programmatic caching, 593 
programmatic redirection, 276-281 
programmatic role checl<ing, 636-640 
programming, see also C#; VB.N ET 
code, 10 

cross-language communication, 149 

exercises with, 204 

introduction to, 146-147 

language, 50, 506 

object-oriented, 189-201 

practical tips on, 202-203 

summary of, 203 

themes, 231, 245 
Programming Entity Framework (Lerman), 

500, 588 
projects 

adding libraries to, 387 

adding WCF service to, 364 

files, 34 

templates, 64 

types (VS), 34-35 
properties 

adding to user controls, 296-297 

and anonymous typing, 512-513 

automatic, 193 

CreateUserWizard control, 618 

creating data types for, 297-298 
CSS, 71, 75-76, 78-79 
defined, 191 

Event Args, 574 

Login control, 613 
Menu control, 261, 265 

PasswordRecovery COntrol, 621 

profile, 645, 646 
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read-only and write-only, 193 
of server controls, 113 
server-side control, 115-116 
for setting themes, 230 

siteMappath control, 274 
skinned, 246 
style class, 555 

TreeView COntrol, 270 

View state, 302-308, 310 
Properties Grid 

for creating embedded and inline styling, 
95 

Events tab, 129 

manual entry of values on, 98 

Solution Explorer, 19 

stylesheet, 87 
Property keyword, 191 
Prototype, 386 

ProviderName attribute, 460 

providers, 606, 624, 642, 650, 677 
pseudo class selectors, 92 
Public function, 178 
public methods, 378 
publication, website, 745 
Publish Web Site, 745 


Q 


Q uery Designer, 434 
query strings, 277, 597, 697 

QueryStringParameter, 466 


R 


: radio filter, 403 
range variables, 508, 552 

RangeValidator COntrol, 321 

Razor vl, 36 
Razor v2, 36 

ReadAIIText method, 340 


readonly attribute - Role Manager 


readonly attribute, 646 
read-only properties, 193 
ready function, 396 
recent packages, 388 
Redirect method, 277 
redirection, programmatic, 276-281 

redirectMode, 696 

Redirect Permanent method, 277 

_ref erences . j s, 420 

references, variable, 179 
registering controls, 290 
regular expressions, 347 

RegularExpressionValidator COntrol, 322 

relational databases 

defined, 422-423 

Entity Framework work with, 500 

foreign keys, 452 

kinds of, 423-424 

SQL for data management, 425 
relationships, between tables, 446-450 
relative URLs, 254-256 
Release folder, 754 
remote site deployment, 741 
removeClass method, 404 
renaming files, 45 

RenderCurrentNodeAsLink property, 274 

rendering content 
HTM L tags for, 11 
jQuery library, 396, 418 
in response to postback, 21-22 
web page, 220 

RenderingMode property, 262 
RenderMode property, 355 
Repeater COntrol 

data source of nested, 664 

as data-bound, 454 

Evai property, 516 

Listviewas Compared with, 524 

Profile service, 661 
Replace method, 344, 347 
replacing elements, 533 

requestLimit attribute, 720 


RequiredExpressionValidator 

property, 325 

RequiredFieldValidator COntrol, 315-317 
RequiredFieldValidator property, 325 
requiresQuestionAndAnswer attribute, 625 
requiresUniqueEmail attribute, 625 

: reset filter, 403 

Resig, John, 386 

Resource N ot Found error, 522 

Response property, 276, 277 

Review ClaSS, 512 

Review folder, 661-665 
Review Instance, 587, 594, 599 
Review objects, 505, 507 
Review property, 515 

Review table 

CSS method, 401 

Entity Framework work with, 500 
pluralizing in, 504 
in sample PW database, 427 
sqiDatasource control collectlon from, 
470 
reviews 

accessed by genre, 500, 505 

database storage of, 421, 422 

editing, 586 

filtering by genre, 470 

hand-coding, 588 

and item deletion, 446 

JOIN statement to find, 434, 435, 436 

Management aCCeSS tO, 627, 632 

managing, 457, 466, 467, 480, 483 
retrieving from database, 366-367 
service call, 366, 368 
shown at the client, 368 
updating, 446 

using Profile to retrieve, 661-665 
Reviews collection, 506 
rgba notation, 77 

RIGHT OUTER JOIN, 435 
RightAligned, 71 

Role M anager 
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configuring, 627-628 
defined, 627, 642 
function of, 627 

managing users witli WSAT, 628-632 

RoleGroups, 637 

roles, user 
defined, 605 

managing witli WSAT, 628-632 
programmatic cliecking of, 636-640 
web application work with, 632-636 

root-based relative URLs, 255 

routing, 281 

RowDataBound event, 570-574 
rows 

deleting without error, 575-579 
profiles stored in single, 651 

RowStyle, 556 

rule sets, 71 

rules, authorization, 605, 635 
run time 

ASP.N ET authentication, 611 

custom error pages, 696 

errors, 332-333, 682 

exception handling, 679 

files, 711 

inline vs. Code Behind code, 52 

IsUserlnRole, 637 

.N ET 4.0, 749-753 
page request processing, 635 
publication for, 745 
theme changes by users, 238 
runat attribute, 108 


S 


screen, error message, 578 
scriptaculous, 386 

scriptManager control, 355, 356, 372-373, 
383 

ScriptManagerProxy control, 373, 383 


Scripts folder, 386, 391 

Scripts property, 357 

search engine optimization (SEO), 599, 696 

<section> element, 12 

Secure Sockets Layer (SSL), 335, 338, 347 

security, 603-642 

Everyone group, 757 

exercises with, 641 

in IIS, 753 

introduction to, 604-607 
login controls, 607-624 
navigation controls work with, 259 
practical tips for, 640 
RoleM anager, 627-640 
summary of, 641 
of tracing, 725 
WSAT, 632 

SELECT *, 450 

Select Case/switch Statement, 168-169, 
173 

<seiect> element, 13 
Select keyword, 508 
Select property, 518 
SELECT statement, 427, 435, 440 

Select Command, 477 
SelectedlndexChanged, 242 
<SelectedItemTemplate>, 525 
SelectedRowStyle, 556 

selecting data, 427 
selectors 

declaring CSS, 71 

grouping and combining, 74-75 

jQuery, 395, 397-400, 420 

pseudo class, 92 

types of CSS, 73-74 
Select Parameters, 466, 470, 482, 491, 495 
SendMailOnError Setting, 737 

serialized reviews, 368 

server controls. seeASP.N ET Server Controls 
server side 

Ajax framework, 349 


832 
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controls, 115-116, 256 
functionality, 362 
ID, 217 

redirects, 279-281 
transfer, 283 

validation methods, writing, 327 

Server.MapPath, 344 

Service Contract, 364, 365 

ServiceContract attribute, 365 

Serv ices property, 357 

SessionParameter, 466 
SetFocusOnError property, 320 
settings, resetting, 28 
shared methods, 378 
shorthand CSS, 77-78 
show ( ) effect, 408 

ShowExpandCol lapse property, 270 

showLines property, 270 
showTooiTips property, 274 
signup pages, 607-612 
simple controls, 116-117 
simple variables, 190 
Single Operator, 510 

SingleOrDefault Operator, 510 

Site M ap, 42 

SiteMapDataSource COntrol, 283 
SiteMapPath COntrol 

breadcrumb, 274-276 

to find Web . sitemap file, 259 

redirects, 283 

for users, 257 

size 

of arrays, 154 

of header /PageWrapper/nav/footer, 

84 

Skin File, 42 

skiniD attribute, 248-249 
skins 

combining styles, themes and, 559-563 
named, 252 

web page, 245-249, 250 


Skip operator, 509-510 
skipwhiie operator, 509-510 
siideDowno effect, 409 

slideToggle 0 effect, 409 

slideupo effect, 409 
smaiiint data type, 442 
Smart Tasks panel 

EntityDataSource control, 520 

list controls, 118-119 
and postback, 143 
SM TP server, 338, 347 

SmtpClient ClaSS, 334 
SmtpException type, 689 

snippets, code, 62 
Solution Explorer, 18-19 

SortedAscendingCellStyle, 557 
SortedAscendingHeaderStyle, 557 
SortedDescendingCellStyle, 557 
SortedDescendingHeader Style, 557 

source, data, 455 
SourceView, 48 

<span> element, 13 

Split View, 48, 64 

SQL (Structured Query Language) 

for data management, 425 

for database access, 421 

text case, 429 

LIN Q to SQL, 499 
SQ L pane, 433 
SQ L Server 

access rules, 762 

power of, 423 

providers, 606 
SQL Server 2012 

data types, 441-442 

database files, 44 

power of, 423 

reading data with, 427-438 
sample database creation, 425-427 
support of A N SI 92 SQ L standard, 425 
SQL Server 2012 Express 
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installing, 5, 424 
LocalDB edition, 465 
SQL statement 

in ASPX pages, 493 

in customized cridview columns, 474 

in data creation, 437 

for data display, 462 

data types, 440-441 

modifications, 572 

Select Command, 472 

subset of columns in, 477 
VS- generated, 470 

SqlDataSource COntrol 

ADO.N ET under, 499 
collection from Review table, 470 
for data display, 457 
for data insertion, 464 
as data source control, 456 
data-bound control in conjunction with, 
460-461 

for Detaiisview customlzatlon, 490, 491 

DropDownList, 470 

similarity of EntityDataSource tO, 

517-518 

SqlDataSourceStatusEventArgs ClaSS, 575 
SqlRoleProvider, 607 
SqlMembershipProvider 

SSM S (SQL Server M anagement Studio) 

in database work, 431 

installing, 424 

Table Designer, 446 

table error check in, 474 
stack trace, 728 
stale data, 590 
Standard controls, 116-132 
Start Page, 20 
statements, 157-177 
static methods, 378, 379 
static property, 296 
static text, 10 


Stat icEnableDefaultPopOut Image property, 

261 

StepType, 130 

String . Format method, 377 
strings 

assigning, 148 

connection, 495 

query string parameters, 597 

returns by web service methods, 377 

setting empty, 471 

simple and complex, 378 

storing connection, 464-466 

types, 150-151 
strong typing, 155, 506 
style attribute, 115 
Style Builder, 84, 87 
style class, 555 
stylesheets, 72-79 

asASP.N ET file type, 42 

creating embedded and inline, 93-98 

external, embedded, and inline, 85-87 

moving inline to external, 100-102 
<styie> element 

added to <head> section, 70 

embedded, 85 

properties, 266 

writing CSS, 68-69 
styles, 554-563, 602 
styles folder, 79 
styles. CSS file, 79, 88-92 

StyleSheetTheme property, 230, 234 

styling, see also CSS (cascading stylesheets) 
language 
applying CSS, 98-100 
external, embedded, and inline CSS, 
85-87 

HTML limitations on, 66 
inline, 115 

managing CSS, 100-102 
Menu control, 265-269 
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the Planet Wrox homepage, 79-85 
programmatic change of C SS, 407 
standard cridview control, 554 

TreeView COntrol, 270 

user controls, 308 
submit event, 413 
: submit filter, 403 
subroutines (subs), 177-179 
Substitute control, 131 
Sum operator, 509 

Summary COlumn, 444 

synchronizing files, 744 
syntax 

of $ method, 397 

CSS, 69, 397 

data-binding expression, 465, 495 

errors, 680 

expression, 731, 766 

jQuery, 395-396 

LINQ, 498, 506 

method syntax, 511 

SQ L extensions, 425 

standard query operators, 507-511 

System, 149-150 

System. 10 namespace, 340 
System. Linq namespace, 499 
System. Net. Mail namespace, 334, 347 
System. Web. Prof iie namespace, 672 

System. Web. UI .WebControls nameSpaCe, 

555 



tab size, 26-27 
Tabindex property, 114 
Table Designer, 446 
Table menu, 58-60 
<tabie> element, 13 

TableDemo . aspx, 58, 61 

tables 


active item tracking, 406 
creating, 440, 443-446 
database, 460 
defined, 452 

Entity Framework work with, 500 

Picture and PhotoAlbum, 523 

primary keys and identities, 442-443 
in relational databases, 422 
relationships between, 446-450, 452 
SQ L Server data types, 441-442 

tags, HTM L 
defined, 32 
elements and, 11-14 
exceptions when controls look like, 

332-333 
HTM L5, 14 

Take operator, 509 

Takewhiie Operator, 509-510 

TemplateField, 473 

templates 

creating reusable page, 225-229 
customizing Listview, 526, 538-544 
generics as, 156 
Listview control, 525 

LoginView COntrol, 614 

master pages as, 208, 212 

N ew Web Site dialog, 35-37 

project, 64 
temporary redirect, 277, 283 
terminology, see also syntax 

00, 189-201 

programming, 146 

text 

files, 340-345 

markup, adding, 54-57 
:text filter, 403 
Text property 

vs. ErrorMessage property, 321 

Login control, 613 
in M arkup View, 21 
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validation control, 320 
text strings, 147 
TextBox control 

adding a, 109-113 

bound, 491 

ControlToValidate property, 315 

ID and runat attribute, 109 
and maintenance of state, 135 
for profile use, 656 
Server Control markup, 114-115 
Toolbox, 21 

text-decoration property, 89 

TextMode property, 317 
text/ntext data type, 442 
<textarea> element, 13 
Theme property, 230 
themes, 229-245 

adding images to, 235-238 

applying, 230-231 

combined with styles, 559-563 

defined, 252 

dynamic switching of, 238-245 
error of invalid, 271 
extending, 235 
how to create, 229, 231-235 
skins, 245 

StyleSheetTheme Or Theme property, 

230 

and text readability, 265 

types of, 230 
Tick event, 363 
time data type, 441 
Timer control, 362-363 
tinyint data type, 442 
tips, data, 701, 728 
title case search, 89 
Title column, 444, 491 
<titie> element, 12 
titles, invalid page, 232, 597, 700 
toggle 0 effect, 409 


toggieciass method, 404 
toolbars 

create your own, 27 

customizing, 27 

editing, 27 

formatting, 57 

VSEW, 18 
Toolbox 

data-bound controls, 454-455 

HTML controls, 132-133 

modifications, 24, 25 

resetting, 28 

Standard controls, 116-132 

TextBox control, 21 

Timer control, 362-363 
toolboxes, VSEW, 18 
TooiTip column, 519 
TooiTip property, 114 
trace, the, 718 
traceMode attribute, 720 
tracing 

customizing, 723-724 

defined, 728 

entire website, 720-722 

function of, 718 

individual pages, 719-720 

and performance, 725 

security, 725 

stack trace, 728 
Treeview control, 257, 270-274, 283 
Triggers property, 355 
true/false constructs (Boolean) , 147 
Try block, 683 
Try Catch block, 688, 689 
T-SQL (Transact- SQL), 425 
type attribute, 646 
type inference, 506 
Type property, 322, 323 
Type selector, 73 
types 
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anonymous, 511-513, 552 

Common Type System (CTS), 149-150 

data, see data types 

generics, 507, 648 

inference, 506, 512, 552 

project, 64 

safety in, 156 

strong, 506, 510, 536-538, 552 


uniform resource locator (U R L), 254 

uniqueidentif ier data type, 442 

Universal selector, 73, 397 

unload phase, 220 

unobtrusive] avaScript validation, 

414-418 
unordered lists, 60 
"Untitled Page", 219 
UPDATE Statement, 438, 440 

UpdateDateTime COlumn, 445, 492, 586 

updateMode property, 355 

updatepanei control, 352, 358, 362, 383 

UpdateParameters, 460, 462, 491, 495 
UpdateProgress COntrol, 358, 383 

updates 

NuGet, 389 

package, 388 
upper bounds, 153 
uri attribute, 259 
URLs 

absolute and relative, 254-257 

NavigateUrl property, 302 

query strings, 277 
routing to define, 281 
user controls, 285-310 

added to content or master pages, 
290-293 

adding properties/methods to, 296-297 
caveats, 295-296 


creating, 287-290 
exercises with, 309 
function of, 285 
introduction to, 286 
practical tips for, 308 
registering, 290 

sitewide registration of, 293-294 

smart, 298-302 

summary of, 309 
usernames 

authentication of, 604 

check for existing, 621 
users 

access rights, 603-604 

anonymous, 671-672 

applying theme selected by, 243-245 

data storage in a profile, 652-656 

flow of data from, 311 

identifying anonymous, 670-671 

input from, 311-347, 312, 313, 313-332, 

334-345, 341-345 
management of photo albums, 665-670 
managing with WSAT, 628-632 
methods for gathering data from, 312 
personalized content for, 643 
photo uploads, 518 
profiles of non-current, 672-675 
programmatic redirection of, 276 
programmatic role checking of, 636-640 
providing feedback to, 358-362 
siteMappath control for, 257 
theme selection, 238, 239-243 
tracking details, 643 
Using block, 504 


ValidateRequest attribute, 333 

validation 
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ASP.N ET controls, 313 
client-side, 314 

of DetailsView COntrol, 491 

exercises with, 346 
page, 220 

practical tips for, 345 
summary of, 346 
unobtrusive jQ uery, 414-418 
of user input, 311-347 
validation controls 

CustomValidator and 

ValidationSummary, 327-332 

defined, 347 

to extend a contact form, 323-326 
HTM L vs. Standard, 133 
HTM L5 data types, 317-320 

RangeValidator control, 321-322 
RequiredFieldValidator COntrol, 315-317 

for Review instance, 588 
standard, 320-321 
unobtrusive] avaScript, 416 
usefulness of, 312 

writing client- and server-side methods, 
327-332 

ValidationGroup property, 321 
ValidationSummary control, 313, 327-332 

Value attributes, 122 
values 

assigning, 148 

boolean values, 513 

CSS, 71, 76-77 

server-side TextMode, 318 

setting empty strings, 471 

stored in View State, 308 

Table Designer default, 446 

ValueToCompare property, 323 

varchar data type, 442 
variables 

backing, 191 

copies of, 179 


declaration of, 147 
generics typing of, 507 
inferring, 509 
naming, 202 
range, 508, 552 
strongly typed, 506 
VB.N ET 

access modifiers, 200 
arrays, 153 
attributes, 365 
caching with, 593 

cross-language communication, 149 

declaring variables in, 147 

LINQ, 498, 506 

methods, 178 

parameter lists, 179 

programming language, 50 

resources on, 146 

as strongly typed, 506 

Timer control, 363 

typecasting, 152 

web application projects with, 38 
verticaiAiign property, 556 
<video> element, 14 
Vieira, Robert, 436 
View State 

caveats, 308 

control reconstruction, 569 
defined, 143 
function of, 138 
properties, 310 

property implementation, 302-308 

StepType, 130 
ViewDetails.aspx page, 598 

views 

different Web Forms, 47-49 
switching while writing CSS code, 
69-70 
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